提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【JavaScript】通过JS修改Html元素的Css综合示例大全

JavaScriptJSHTMLCSS 修改 通过 示例 元素
2023-09-11 14:15:11 时间
获取元素css样式（内联样式）

元素名.style.样式名，如：alert(div1.style.height);

但是，只能读取内联样式，也就是<div style="内联样式">

获取元素css样式（当前元素样式）

div1.currentstyle.width，只支持IE浏览器

获取元素css样式（推荐）

getComputedStyle(div1,null).width

修改元素css样式

元素名.style.样式名="",如：btn.style.height="100px"

如果样式有-号，如：background-color,去掉减号，将减号第一个字母大写。div1.style.backgroundColor="red";

一、例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    .div1 {
      width: 200px;
      height: 200px;
      background-color: rgb(195, 226, 164);
    }
  </style>

  <body>
    <button class="btn_1">显示div内联样式（style=）</button>
    <button class="btn_2">显示div当前样式(仅支持IE)</button>
    <button class="btn_3">显示div当前样式(推荐)</button>
    <button class="btn_4">修改div样式</button>
    <p></p>
    <div class="div1">Div1</div>
  </body>


<script type="text/javascript">

var btn_1=document.getElementsByClassName("btn_1")[0];
var btn_2=document.getElementsByClassName("btn_2")[0];
var btn_3=document.getElementsByClassName("btn_3")[0];
var btn_4=document.getElementsByClassName("btn_4")[0];
var div1=document.getElementsByClassName("div1")[0];

btn_1.onclick=function(){

    alert("用Style显示内联样式=【"+div1.style.height+"】,应该为空！");

}

btn_2.onclick=function(){

alert("用currentStyle显示当前样式,应该为空！"+div1.currentStyle['width']);

}
btn_3.onclick=function(){

alert("getComputedStyle显示当前样式:"+getComputedStyle(div1,null).width);

;
}
btn_4.onclick=function(){

    div1.style.height="300px";
    div1.style.width="300px";
    div1.style.backgroundColor="red";
}

</script>

</html>

相关文章