没有合适的资源?快使用搜索试试~ 我知道了~
javascript针对DOM的应用分析(三)
需积分: 6 0 下载量 82 浏览量
2020-12-11
11:19:42
上传
评论
收藏 52KB PDF 举报
温馨提示
试读
2页
如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。 今天这章我们就讲这两个应用 (一)对html里现有的DOM元素进行操作。 我上面说了,对现有的DOM元素进行操作,无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。 一是直接在html文档里写入样式例如 <div xss=removed></div>。 二是在html文档头部用样式标签插入例如 <style> #dom{width
资源详情
资源评论
资源推荐
javascript针对针对DOM的应用分析(三)的应用分析(三)
如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。
今天这章我们就讲这两个应用
(一)对html里现有的DOM元素进行操作。
我上面说了,对现有的DOM元素进行操作,无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获
取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。
一是直接在html文档里写入样式例如
<div style=”width:300px;height:200px;background:#000;”></div>。
二是在html文档头部用样式标签插入例如
<style>
#dom{width:300px;height:200px;background:#000;}
</style>
三就是我们常用的链入方式例如
<link rel=”stylesheet” type=”text/css” href=”css.css” />
这三种的用JS操作它样式的方法都不太相同
重点我们说第一种链入样式操作,因为是最常用的,也是最方便的。
第二种链入样式操作麻烦。
第三种链入样式操作麻烦不说,而且无法直接修改样式,想修改的话还必须用第一种的方法,也就是说只能看不能摸
第一种链入样式的操作方法
例<div id=”dom” style=”width:300px;height:200px;background:#000;margin-top:10px;”></div>
获取它的高度属性,首先当然是获取DOM元素了,用前几章的方法
var a = document.getElementById(“dom”);
再来获取它的高度属性,很简单
var h = a.style.height;
以此类推,获取宽度,获取背景色
var w = a.style.width;
var bg = a.style.background;
注意那个外边距属性是margin-top;
要获取这个不能直接写
var mt = a.style.margin-top;
要用JQ中提到的骆驼写法
var mt = a.style.marginTop;
获取它当然没什么用处,我们要能修改,修改起来也很方便。例如我们要把它的高度变为100,很简单,就一句
a.style.height = “100px”;
其他的以此类推,我不再多说;
第二种链入样式的操作方法
<style>
#dom{width:300px;height:200px;background:#000;margin-top:10px;}
</style>
这种操作需要区分浏览器。因为IE和FF对这个获取的代码不同,比如获取高度的方法是
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var a = domcss[0].style.height;
修改的话是这样的
domcss[0].style.height = “100px”;
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下;
第三种链入样式的操作方法
<link rel=”stylesheet” type=”text/css” href=”css.css” />
这种操作也需要区分浏览器。
获取的话一般都是写个函数,函数是这样的
function CurrentStyle(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
假如我们那个css.css文件里面有height属性
获取方法是var a = CurrentStyle(“dom”).height;
无法用这里的方法直接修改,只能用第一种方法修改
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下;
(二)用JS动态创建DOM元素。
其实这个很简单就是几个JS的方法而已,不过要像盖房子一样一步一步来,比如我要创建一个这样的DOM元素:
<div id=”dom” style=”width:100px;height:100px;background:#000;margin-top:10px;”></div>
第一步,要创建一个div节点。var newobj = document.createElement(“div”);
第二步,要给这个节加一个id属性,并且属性名是dom。newobj.setAttribute(“id”,”dom”);
第三步,要给这个节点加属性了这里有两种方,一种就是我们前面说到的修改样式是这样的newobj.style.width = “100px”;还有
一种就是第二步用到的那个方法newobj.setAttribute(“width”,”100px”),其他属性以此类推
第四步,就是要把这个节点给放到html文档里,方法是这样的document.body.appendChild(newobj)这句的意思是这样的。
document.body就是获取了body元素
weixin_38746818
- 粉丝: 7
- 资源: 910
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0