<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)
}