Js中设置css样式

Js中设置css样式本次介绍了 3 种修改 css 样式的方法 下面分别介绍 css 代码 style div width 100px height 100px background color pink style background color red style js 代码

本次介绍了3种修改css样式的方法,下面分别介绍

css代码

<style> div{ 
    width: 100px; height: 100px; background-color: pink; } .style{ 
    background-color: red; } </style> 

js代码

 <script> window.onload=function(){ 
    var obj=document.querySelector("div"); var btn=document.querySelector("button"); btn.addEventListener("click",function(){ 
    // 方法1 obj.style.backgroundColor="red"; // 方法2 // obj.style.cssText="background-color:black;" // 方法3 // obj.className="style"; },false) } </script> 

HTML代码

<body> <div></div> <button>按钮</button> </body> 

方法1.使用obj.style来修改css
obj.style.属性名=“属性值”;此方法设置的是内联样式,而且有”-“时需要使用驼峰命名法

obj.style.backgroundColor="red"; 

方法2.使用obj.style.cssTest来修改css
obj.style.cssText=“属性名:属性值;” 此方法设置的也是内联样式,但是不需要使用驼峰命名法。

obj.style.cssText="background-color:black;"; 

方法3. 使用obj.className来修改样式表的类名

obj.className=“类名”;此方法修改的是css样式表,会将相同的样式覆盖

obj.className="style"; 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/204065.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午9:05
下一篇 2026年3月19日 下午9:05


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号