jS 赋值给CSS 怎么操作

html-css023

jS 赋值给CSS 怎么操作,第1张

<div id="did" class="defcls"></div>

js 使用  ...style.[css属性（第二个首字母大写）]

var dom = document.getElementById( "did" )

      dom.style.color = "#000"

      dom.style.fontSize = "30px"

因为js选择元素很麻烦，所以建议引入jquery 库，操作元素很方便。也是常用的做法。

jquery

$('.defcls').css({color:'#000',fontSize:'20px'})

以上是直接修改元素的属性。直接修改 CSS样式表 就很麻烦了，一般不这样做。

js直接修改页面中的CSS样式表

var Hsheet = window.frames.wpages.document.styleSheets[0]//找到样式表

function setRules(name){

   for(var i = 0 i < Hsheet.cssRules[0].cssRules.length i++){

     if(Hsheet.cssRules[0].cssRules[i].selectorText===name){ //找到样式

Hsheet.cssRules[0].cssRules[i].style.color = "#000"

break

     }

   }

}

setRules('defcls')

这个方式比较罕见，只有在即为特殊的情况下，才会直接修改样式表，也是效率最低的一种。

要写在onload事件方法中。因为你这样写，会在DOM节点（aaa）还没加载的时候执行，找不到aaa所以就不能改变其宽度

<script type="text/javascript">

function load(){

document.getElementById('aaa').style.width =100

}

</script>

</head>

<body onload="load()">

<div class="aaa" id="aaa"></div>

</body>

推荐使用jquery代码

<script type="text/javascript" src="1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('.aaa').css('width','100px')

})

</script>