
<body>
<div style="height: 20px;width: 20px;background: #666;" id="node">
</div>
<script>
// 使用原生JS
var node = documentgetElementById("node");
nodestylebackground = "black";
// 使用JQuery
var node = $("#node");
nodecss("background", "#111");
</script>
</body>
thisstylecolor
thisstyledisplay
按照这样的方式获取
this表示你要获取样式的对象,可以通过documentgetElementById等来获取对象,这就不用我多说了吧
1 在css中,我们给属性设置值的时候,不需要考虑值的类型,但是在js中,必须为字符串(普通字符串,模板字符串),必须写全,声明中包含的单位必须完整的包含进去。
2 想通过js设置css属性一定要查css名称对应的脚本属性。stylefloat
3 stylecssText:获取所有的全部style属性
4 getAttribute('style'):效果和上面等同
1 修改元素的style属性
2 修改元素的class或id
3 插入样式标签
4 改变页面的导入的样式表或者改变样式表
5 className+='newClassName'
6 classNamereplace(reg,'newClassName')
1 appstylewidth
1 ie:appcurrentStylewidth:
2 documentdefaultViewgetComputedStyle(app,null)width:null-是否要取到伪类
3 cssStyleSheet:获取一个页面引入的文件的数组
4 cssStyleRuler:一个样式表里面所有的属性。
//获取id="div"的高度
documentgetElementById("div")styleheight//设置id="div"的高度
documentgetElementById("div")styleheight="200px";
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style>
#one {
color: red;
width: 150px;
border: 1px solid blue;
}
#but {
color: blue;
width: 100px;
border: 1px solid red;
}
</style>
<script>
function cssrule(a, b) {
var a = a || 0;
var b = b || 0;
if (!!documentall) {
return documentstyleSheets[a]rules[b]style;
} else {
return documentstyleSheets[a]cssRules[b]style;
}
}
consolelog(cssrule()width);
consoledebug(cssrule(0, 1)width);
windowonload = function() {
var one = documentgetElementById("one");
var but = documentgetElementById("but");
butonclick = function() {
oneclassName = 'div2';
}
}
</script>
</head>
<body>
<div id="one">11111111111111</div>
<div id="but">22222222222222</div>
</body>
</html>
以上就是关于JavaScript 如何获取和修改 div 中style中的值全部的内容,包括:JavaScript 如何获取和修改 div 中style中的值、document.queryselector 怎么获取css属性、css的styleSheets模块等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)