Js中设置css样式

本次介绍了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(){// 方法1obj.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";

Js中设置css样式相关推荐

js 设置html标签样式表,js怎么设置css样式？
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.直接设置style对象(内联样式) 使用JavaScript ...
html 中设置样式方式,在html元素中设置css样式的方式是什么
如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置"id" 和 "class"选择器. (推荐教程:CSS教程) 下面我们来分别说一下id选择 ...
JS如何设置CSS样式？
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值 ...
JS怎么设置CSS样式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有"-"号,就写成驼峰的形式(如textAl ...
实现js动态设置css样式，js动态设置全局样式主题色
需求: 1.设置一个全局的样式 2. 样式是需要动态改变的,改变的内容是通过请求后台接口获取的,因此需要js能够对css进行改变实现: 或许你可能不相信,代码只需要几行 js代码: // 设置主题色 ...
js里设置html样式,JS 动态设置css样式
1.0 内联样式 : 通过行内样式.style 属性来编辑给定的HTMLElement的内联样式 let el = document.createElement('div') ; 01) . el. ...
vscode中设置css样式里让逗号不换行
vscode中css样式里给多种属性同时设置样式时应该是这样的, 但是我格式化后却变成了这个样子,看着很不舒服,搜索了其他一堆在setting.json中配置的方法,结果都不管用,最后发现可能是Bea ...
react学习(四)之设置 css样式篇
react中设置css样式方法一: 行内样式:使用{{ }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...
html js 设置样式,原生js设置样式笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性用J ...

Js中设置css样式

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

Js中设置css样式相关推荐

最新文章

热门文章