JavaScript 如何获取和修改 div 中style中的值

JavaScript 如何获取和修改 div 中style中的值,第1张

<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模块等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/9300700.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-26
下一篇2023-04-26

发表评论

登录后才能评论

评论列表(0条)

    保存