js获取非行间样式获取与定义

最新推荐文章于 2023-02-19 20:51:04 发布

原创最新推荐文章于 2023-02-19 20:51:04 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #css

JS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种使用JavaScript来获取和修改HTML元素样式的实用方法，包括获取非内联CSS样式和为HTML对象设置新的样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--DOCTYPE
 html-->

<html>

<head>

<meta
 charset="utf-8" />

<style>

*{
 text-align:center;}

input{
 margin-top:30px; padding:10px 20px;}

#div1{
 width:500px; height:300px; background:red; margin:10px auto;}

</style>

</head>

<body>

<input
 type="button" value="style" id="btn" />

<div
 id="div1"></div>

<script>

//获取非行间css样式

function
 getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值

    if(obj.currentStyle){  
//针对ie获取非行间样式

        return obj.currentStyle[attr];

    }else{

        return getComputedStyle(obj,false)[attr];  
//针对非ie

    };

};

//为对象写入/获取css样式

function
 css(obj,attr,value){   //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式

    if(arguments.length
 == 2){  //arguments参数数组，当参数数组长度为2时表示获取css样式

        return getStyle(obj,attr); 
//返回对象的非行间样式用上面的getStyle函数

    }else{

        if(arguments.length
 == 3){  //当传三个参数的时候为设置对象的某个值

            obj.style[attr]
 = value;

        };

    };

};

window.onload
 = function(){

    var oDiv
 = document.getElementById("div1");

    var oBtn
 = document.getElementById("btn");

    oBtn.onclick
 = function(){

        alert(getStyle(oDiv,"height"));

        css(oDiv,"background","green");

        alert(css(oDiv,"width"));

    };

};

</script>

</body>

</html>