javaScript：DOM中的CSS操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了javaScript：DOM中的CSS操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.style 属性获取元素写在行间的样式

2.getComputedStyle(元素对象，null)可以获取元素的非行间样式

3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）

效果预览图

代码实现

在 JavaScript 中，可以通过 DOM（文档对象模型）操作来访问和修改网页上的 CSS 样式。js提供了灵活的方式来操作和修改 DOM 元素的 CSS 样式，使网页开发者可以根据需要进行样式的动态控制和改变。

1.style 属性获取元素写在行间的样式

通过元素的 style 属性，只能获取元素写在行间的样式

通过元素的style属性设置的样式也是行间样式

2.getComputedStyle(元素对象，null)可以获取元素的非行间样式

getComputedStyle(元素对象，null)可以获取元素的非行间样式

该方法的第一个参数是要获取样式的元素对象，第二个参数一般写成null

他的含义是伪类或者伪元素，一旦具有第二个参数，则表示获取的是伪类或者伪元素的css样式。

在ie中，可以使用 currentStyle来获取元素的样式例如 wp.currentStyle['width']

 let wp = document.querySelector('.wp')
    console.log(wp.style);
    console.log(getComputedStyle(wp,null));
    
    //获取wp对象的所有样式
    let obj = getComputedStyle(wp,null)
    console.log(obj.width,obj.height);

    let obj2 = getComputedStyle(wp,':hover')
    console.log(obj2.background);
    // console.log(wp.currentStyle['width']);

3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）

效果预览图

javaScript：DOM中的CSS操作,javascript,javascript,css,开发语言文章来源地址https://www.toymoban.com/news/detail-696330.html

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css操作</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            border: 1px #000 solid;
        }
        .wp:hover {
            background: #ff0;
        }
    </style>
</head>
<body>
    <div class="wp" ></div>
    <button id="btn">点击++</button>
</body>
</html>
<script>
    
    let btn = document.getElementById('btn')
    btn.onclick = function(){
        let i = 5;
        console.log(getComputedStyle(wp).width);
        let w = getComputedStyle(wp).width
        wp.style.width =parseInt(w)+50+'px'  //parseInt保留整数部分
    }
</script>

到了这里，关于javaScript：DOM中的CSS操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！