利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作

时间:2023-01-09 19:44:15
  HTML中引入CSS样式的方式有三种:

1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:
<link href="css/style.css" rel="stylesheet" type="text/css">
2.在Html头部用<style></style>包起来,在这里面编写样式:
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3.在标签里面直接编写行内样式。
<div style="color: #333"><div>

下面就简单的介绍下利用JS对内联样式进行操作:

    脚本化CSS最直接的方法就是更改单独的文档元素的style的属性值,类似大多数的HTML的属性,style也是元素对象的属性,其可以在JS中对其进行操作。由于style具有特殊性,通常style中的属性不只有一个,因而style的值不单单只是一个字符串,而是一个CSSStyleDeclaration对象。通过对该对象的操作可以利用JS更改元素的样式。利用JS操作CSS样式需要注意以下几点:

(1)通常通过HTML的属性和利用<style>标签定义的样式属性的面子中会包含有一个或者多个连字符如:background-color,但是在JS中两字符是减号,像前面那样书写会报错的。因而在利用JS对属性进行操作时首先将连字符去掉,同时需要将原来紧连着连字符的后的字符转换为大写。这样CSS属性border-width就转换为了:borderWidth。JS中通过如下的方法对CSS样式属性进行访问:e.style.borderWidth="2px"。另外CSS属性中如果使用了JS中的保留字,则需要在上述的基础上加上CSS,如CSS中的float属性,利用CSSStyleDeclaration对象的cssFloat属性来进行设置。

(2)CSS样式属性值在CSSStyleDeclaration对象中使用时需要利用字符串形式。同时所有的定位属性(如:width,height,top,left等)都需要加上单位px。这样再利用JS 对其进行运算时需先对字符串进行处理(可以利用字符串对象的方法split)。

(3)JS中获取属性值和给属性赋值的几种方式:

    a、直接利用CSSStyleDeclaration对象进行操作

    b、getAttribute()和setAttribute()分别对获取属性值和给某属性赋值。

    但是通过以上两种方式对CS样式的属性进行操作时,只能获取已经通过JS代码进行设置过的值或者通过HTML元素显示设置了想要的内联样式的值(即在HTML标签中通过属性style进行设置了的属性值)。也就是说文档可能包含一个样式表以设置div的宽度均为300px,但是通过JS读取该属性时将会得到一个空的字符串,除非在JS中已经有一个style属性覆盖了样式列表中的设置。

    c、利用window对象的方法getComputedStyle()获取计算后的样式,该方法是可以获取上面不能获得到的属性值得,但是通过该方法获取到的属性是只读的,同时都是绝对值(如width用百分比表示的会计算转换为具体的数值,颜色会转换成rgba),而且该方法不计算复合属性,不能获取符合属性的值。

   d、通过获取元素对象后利用element.css({width:50px; height:50px;})的方式也可以为元素对像添加样式。