jS 赋值给CSS 怎么操作

html-css016

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>

CSS 是静态的 不能使用 js 的变量

但是你可以使用js 去修改 css 的值

var you_var_height = 100

var you_var_width = 100

//写法1 纯JavaScript

var div1 = document.getElementById('ID00001')

div1.style.height=you_var_height

div1.style.width=you_var_width

//写法2 jquery

$(document).ready(){

$('#ID00001').css('height',you_var_height)

$('#ID00001').css('height',you_var_width)

}