js中元素样式设置的六种方法

最新推荐文章于 2024-04-27 16:48:56 发布

聪明的墨菲特学前端

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量6.4k

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_52452081/article/details/129734211

版权

元素的样式设置六种方法

1、对象.style
2、对象.className
3、对象.setAttribute(“style”)
4、对象.setAttribute(“class”)
5、对象.style.setProperty(“CSS属性”, “CSS属性值”)
6、对象.style.cssText

<style>
      .pink {
        background-color: pink;
      }
    </style>

<body>
    <div id="box">盒子</div>
    <button id="change">变色</button>
  </body>

在js文件中获取元素

当点击按钮时给div盒子添加背景颜色

var box = document.getElementById("box");
document.getElementById('change').addEventListener('click',function(){
}

设置的六种方法操作

在事件的处理程序中（函数内）书写

//1、对象.style
     box.style.backgroundColor = 'pink'

// 2、对象.className
     box.className = 'pink'

// 3、对象.setAttribute("style")
box.setAttribute('style','background-color:pink')

// 4、对象.setAttribute("class")
    box.setAttribute('class','pink')

 //5、对象.style.setProperty("CSS属性", "CSS属性值")
 box.style.setProperty('background-color','pink')

// 6、对象.style.cssText
  box.style.cssText = 'background-color:pink'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

聪明的墨菲特学前端

关注关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
js中元素样式设置的六种方法

pink;</</</</
复制链接

扫一扫

js 动态创建元素并设置样式

weixin_34356555的博客

02-28

5519

2019独角兽企业重金招聘Python工程师标准>>> ...

原生js获取元素样式的简单方法

11-27

我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的样式返回来。 1、ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值，但是有时候获取的并非是节点的样式值，而是空值。这是因为ele.style只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href=”cs

参与评论您还未登录，请先登录后发表或查看评论

js动态设置css主题(Style-setProperty)

热门推荐

铁锚的CSDN博客

09-05

3万+

动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。

JS中setAttribute的使用

chen_wei_1990的专栏

09-14

1859

在web开发中，经常会为某个标签设置属性，那么就可以利用js的setAttribute()方法为标签的属性设置值。下面的内容翻译自W3C DOM Level 1中关于setAttribute方法的说明. 具体的方法参数如下： object.se

利用JS修改style属性和添加元素类名（important)

webpon

08-04

3972

1、添加style样式　　A、当代码中没有style元素时，可以通过document.createElement("style");建立style，然后插入到doucment.head,最后就可以成功在js中添加style了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

用javascript给元素添加样式的方法以height为例

猛一回头的博客

01-26

3641

在工作中遇到很多人对简单的样式很头疼，经常忘记方法，自己也经常这样，或忘记或弄混淆，在这里做一个总结：假如有一个如下的div元素，需要通过 js 来控制它的高： <div id="test"></div> 可以有如下几种方法： 1、用原生的 setAttribute( ) 方法： document.getElementById...

JS如何设置元素样式的方法示例

10-19

在本文中，我们将详细探讨三种通过JavaScript设置HTML元素样式的常见方法，并分析它们的特点和适用场景。 1. **通过元素的`style`属性设置样式** 这是最基本和直接的方法，通过`element.style.property = value`的...

js获取元素外链样式的方法

10-24

主要介绍了js获取元素外链样式的方法,分别在标准浏览器与IE浏览器两种情况下实现获取对应样式的功能,是非常实用的技巧,需要的朋友可以参考下

jQuery使用之设置元素样式用法实例

10-24

`css()` 方法是jQuery中用于获取或设置元素样式的重要工具。使用 `css(name)` 可以获取样式属性的值，如`color`、`width`等；使用 `css(properties)` 可以设置多个样式属性，如： ```javascript $(function() { ...

js setattribute批量设置css样式

12-02

firefox等可以使用 var dom=document.getElementById(“name”); dom.setAttribute(“style”,”width:10px;height:10px;border:solid 1px red;”) ; IE中则必须使用style.cssText var dom=document.getElementById(“name”); dom1.style.cssText = “width:10px;height:10px;border:solid 1px red;”; 补充一下，目前style.cssText类似innerHTML了，已经成为一个

js操作元素样式、元素内容和元素属性的方法

weixin_50613702的博客

12-10

3058

一、JS操作元素内容及元素属性 1 操作元素内容简介：元素内容指开始标签与结束标签之间的内容，单标签没有元素内容，表单标签除外。 1.1操作闭合标签内容 1.闭合标签的内容需要设置或修改，使用闭合标签的innerHTML属性。语法：设置：标签.innerHTML = “内容”；获取：var text = 标签.innerHTML； var a= document.getElementById("text"); //1.设置内容。 a.innerHTML = "内容"； //2.innerHTM

JS设置样式

前端菜鸟

06-26

1万+

IE9以上，google,firefox支持 document.getElementById('alert_wrap').style.setProperty('position', 'fixed') document.getElementById('alert_wrap').style.setProperty('margin-left', -tanchuWidth / 2) document.g...

javascript获取元素样式

qq_63273144的博客

09-25

1450

3.window必须加，因为如果不写的话，getComputedStyle会被当作是一个变量，在ie8及以下的浏览器中，如果这个变量找不到，就会去全局中去找，找不到的话就会报错。style读取的是内联样式，即写在元素style属性上的样式，而getComputedStyle是读取的最终样式，包括。if(window.getComputedStyle){ //判断浏览器中是否有这个对象，这个window必须加。注意，在这两个方法中，读取到的样式都是只读的不能修改。这个方法是window对象的方法，

用JS改变html样式

张致豪

06-13

1万+

用JS改变HTML样式在html中定义样式的方法有3种：通过link标签链接外部样式使用style标签定义嵌入式样式使用标签style属性定义样式用JS改变的HTML样式无非就是上面三种，改变样式只需要解决两个问题找到要更改样式的元素更改样式更改link链接的外部样式 html> head> title>title> link rel="sty

js修改css属性、html属性

05-11

1万+

js修改html属性： 1.document.getElementById('cloimg').setAttribute("src","/home/images/open.gif");---正确 2. $('#cloimg').setAttribute("src","/home/images/open.gif");---？？？待验证 js修改css属性： 1.id/clas

js中获取dom元素css样式的几种方式

05-31

在 JavaScript 中，获取 DOM 元素的 CSS 样式可以使用以下几种方式： 1. 使用 `style` 属性 ```javascript const element = document.getElementById('my-element'); const color = element.style.color; ``` 2. 使用 `window.getComputedStyle()` 方法 ```javascript const element = document.getElementById('my-element'); const styles = window.getComputedStyle(element); const color = styles.getPropertyValue('color'); ``` 3. 使用 `element.currentStyle` 属性（仅适用于 IE 浏览器） ```javascript const element = document.getElementById('my-element'); const color = element.currentStyle.color; ``` 需要注意的是，以上三种方式获取到的 CSS 样式值都是字符串类型，如果需要进行比较或计算，需要进行类型转换。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交