javascript如何使CSS的样式改变？

发布网友发布时间：2022-04-21 01:15

共2个回答

热心网友时间：2022-06-17 01:28

通常我们将网页的样式和内容分开，样式放在css文件，内容放在html文件，当html文件需要用到样式的时候，直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。

1、JavaScript设置内联样式
改变样式最直接的方法就是改变元素节点的style属性。如：

myElement.sytle.color = “red”;
myElement.sytle.left = “40px”;
myElement.sytle.backgroundRepeat = “repeat-x”;

JavaScript设置内联样式时，采用和css设置样式一样的风格。如设置myElement的color属性时，我们可以赋值任何在css中可以用的值，所以这里除了可以使用”red”，还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。
另外用JavaScript改变网页的属性还需要注意2点：
l JavaScript中采用驼峰命名法：在css中，属性名中的单词之间是用横杠隔开，如font-weight, background-color。但在JavaScript中，横杠可能被认为是减号，所以采用驼峰命名法，单词之间不用横杠，如font-weight在JavaScript中应该写成fontWeight;而background-color写成backgroundColor。
l JavaScript中属性值为字符串：在css中，属性值都写在双引号中，即要用字符串来给css相关属性赋值，同样当属性值有单位时，我们需要将单位也写在字符串中。

2、JavaScript设置外部样式
当你需要改变的样式已经在css文件中定义了，我们也可以用JavaScript直接用定义好的css样式。如下格式：

myElement.className = “someCSSclass”;

同样需要注意几点：
l 不要将className写成class，因为class是JavaScript保留的关键字，我们不能使用。
l 将定义在css中的样式直接赋值给className，就能改变myElement元素的样式。
l 当要删除元素的样式，可以给className属性赋值为空。如：
myElement.className = “”;
教程网站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容，可以看看，希望对你有帮助。

热心网友时间：2022-06-17 01:28

1 <div id ="mydiv" style="width:100px;height:100px; border:1px solid black;"></div><br> 2 <script><br> 3 var mydiv = document.getelementbyid("mydiv");<br> 4 <br> 5 alert(mydiv.style.width);//100px<br> 6 <br> 7 alert(mydiv.style['height']);//100px<br> 8 <br> 9 var style=mydiv.style;<br>10 alert(style.backgroundcolor);//red<br>11 <br>12 mydiv.style.backgroundcolor='green';//mydiv背景色变为绿色 <br>13 </script>在这种情况下，获取和设置样式只靠style属性就可以，因为element.style属性返回的是类似数组的一组样式属性及对应值，因此访问具体样式的时候可以采取两种方式即“ele.style.属性名称”和“ele.style['属性名称']”。但是，要注意的是，针对css样式里background-color;margin-left之类的短杠相接的属性名称，在使用style属性获取设置样式的时候名称要改为驼峰式，如ele.style.backgroundcolor.<br>二、因为第一种方法，即使用style属性只能获取到内联样式。但是，实际情况是文档在现在都基本遵循分离思想，样式基本都是外部链接，所以三种样式都要考虑到的，这时就要使用其他方法进行获取，而在这种情况下进行样式获取时，不同的浏览器又有不同的处理方式（主要是ie和非ie），因此根据浏览器可以分为两种方式：<br>（2.1）非ie浏览器中，使用document.defaultview对象的getcomputedstyle(ele，null/伪类)方法，该方法接受两个参数，第一个为要考察的元素，第二个则要根据情况，如果只是考察元素本身则为null，如果要考察伪类，则为响应的伪类。该方法获取到的为元素应用的最终样式组合，同样是类似数组的一个实例。<br>（2.2）在ie浏览器中，对getcomputedstyle()方法不支持，但是针对每个标签元素都有一个近似于style属性的currentstyle的属性，且用法和style用法相同。只不过获取到的样式范围不一样。currenstyle获取到的和getcomputedstyle（）方法相接近。<br>为了在处理时达到兼容，可以根据这两种不同的处理方式创建一个函数来达到兼容目的，使得不管在那种浏览器中，都可以成功获取样式。如下所示：<br> 1<style type="text/css"><br> 2 #mydiv {<br> 3 background-color:blue;<br> 4 width:100px;<br> 5 height:200px;<br> 6 }<br> 7 </style><br> 8 <br> 9 <div id ="mydiv" style=" border:1px solid black;"></div><br>10 <script><br>11 var mydiv = document.getelementbyid("mydiv");<br>12 var finalstyle = mydiv.currentstyle ? mydiv.currentstyle : document.defaultview.getcomputedstyle(mydiv, null);/*利用判断是否支持currentstyle（是否为ie）<br>13 来通过不同方法获取style*/<br>14 alert(finalstyle.backgroundcolor); //"red"<br>15 alert(finalstyle.width); //"100px"<br>16 alert(finalstyle.height); //"200px"<br>17 </script>