理解DOM如何操作CSS样式

html-css018

理解DOM如何操作CSS样式,第1张

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合,这一系列的属性和方法也被称为接口,这些接口可以让我们更加方便的操作HTML和XML,注意我没有说CSS哦

但我们经常会听到js操作css或者脚本化css的说法,那是怎么回事呢?

其实,DOM中提供的方法能操作HTML的所有内容,其中包括能操作元素的属性,而元素的属性中又恰好包含style属性,style属性表示的是该元素行间样式,而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。

DOM操作CSS样式其实质是通过DOM控制行间样式,从而达到改变样式的效果。这只能说间接的操作CSS,并非真实的直接操作CSS文件

通过DOM元素的style读写CSS行间样式

格式:ele.style.prop

注:

1. 可读可写行间样式,没有兼容性问题

2. 碰到保留字属性,前面应添加css;例如:float-->cssFloat

3. 复合属性必须拆解

4. 组合单词变成小驼峰式

5. 写入的值必须是字符串格式

用法比较简单,我们深入看看style吧

先随便来两个元素,并选中

我们发现,dom元素的原型的原型都是HTMLElement。于是猜测,style就是定义在HTMLElement的原型链上,所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

明白style定义在哪里之后,再来看style里面是什么?

目前也只有这种方式能修改CSS样式。

下面再来了解查询样式的方式:

window.getComputedStyle(ele,null)

IE使用另外一直方式代替

ele.currentStyle

最后我们封装一个所有浏览器都能用的方法:

CSS是层叠样式表,一般和DIV配合使用,也可以用在表格的样式里;

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscape的Javascript和 Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

不是JE22,是J2EE。。。。

J2EE是一套全然不同于传统应用开发的技术架构,包含许多组件,主要可简化且规范应用系统的开发与部署,进而提高可移植性、安全与再用价值。

具体内容去百度一下

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Test</title>

<script src="http://pu-datacastle.oss-cn-qingdao.aliyuncs.com/master.third.source/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>

<style>

*{

/*margin: 0px

padding: 0px*/

}

.test1{

width: 100%

height: 22px

line-height: 22px

border: 2px solid #ccc

}

</style>

</head>

<body>

<div class="test1">公告内容</div>

<br />

<button class="changestyle">更改样式</button>

<script>

$(function(){

$(".changestyle").off("click").on("click",function(){

$(".test1").css({

"font-size":"16px",

"font-weight":"bold",

"border":"2px solid blue",

"width":"200px",

"height":"100px",

"text-align":"center",

"line-height":"100px",

"color":"red"

})

})

})

</script>

</body>

</html>

望采纳!