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如何设置元素样式的方法示例

10-19

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

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

通过 JS 添加样式

HTML_Z的博客

03-18

1万+

通过 JS 添加样式。

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

热门推荐

LPC的博客

04-24

1万+

目录JS修改样式的8种方式1.直接设置style的属性2.直接设置属性3.设置style的属性4.使用setProperty5.改变class6.设置cssText7.引入css样式文件8.使用addRule、insertRule JS修改样式的8种方式 1.直接设置style的属性某些情况用这个设置 !important值无效如果属性有’-'号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式 element.style.height = '100px'; 2.直接设.

js修改元素样式

libingjiedd的博客

03-17

2330

–3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等。|–x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)：获取指定字符；如返回-1，x则不在数组中。|–parentNode.insertBefore()(新元素对象，A)–其中A为新元素要插入位置的后一位元素。|–x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字。

JavaScript基础：操作样式(通过获取和设置style属性、className属性)

Alley_Olive的专栏

07-08

3612

JavaScript基础：操作样式(通过获取和设置style属性、className属性)

JavaScript style 样式

ln201009的博客

02-21

7220

1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为JavaScript style 样式。 2、我们就先设置一个div，然后style样式设置div的样式属性。图二就是我们设置好的这个div的样式 3、接下来我们运用script这个标签来设置js的内容，也就是要运用js改变我们用style设置的样式。 4、我们要设置哪个内容就要先获取到哪个元素，正如这个我们要获取到那个div，我们就要通过获取div的id名

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

10-24

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

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

11-27

我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置在开始之前先说下获取最终应用在元素上的...

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

10-24

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

js设置样式的三种常用方式及其点击实现样式切换

weixin_49766692的博客

03-15

5603

css文件需要什么就写什么例如： div{ width: 200px; height: 200px; border: 1px solid ; } .active{ border: 10px solid mediumorchid; } .test{ background:linear-gradient(to bottom right,red,orangered,lawngreen,yellow,green); } HTML

JS操作元素样式

weixin_51235620的博客

10-22

4637

通过js修改元素样式：语法：元素.style.样式名=样式值；如果css样式名中含有-，这种名称在js中是不合法的，比如：background-color需要将这种样式名修改为驼峰命名法：去除-，-后面第一个单词首字母大写，该属性名要改为backgroundColor。通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式往往会立即执行。但是：如果在样式中添加了！important,此时改样式具有最高的优先级，即使通过js也无法覆盖改样式，此时js修

js - DOM操作 - 添加样式的三种方法

m0_74417967的博客

06-29

3875

第一种方法有一个问题就是一不小心容易覆盖元素以前就已经绑定了的样式。第一种方法是最笨重的方法，只适合修改小的样式。注意类名前面不要加点。注意类名前面不要加点。

JS添加/修改CSS样式

第一段代码的博客

12-28

1万+

JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的，记得是等号赋值。 document.getElementById("xx").style.xxx=xxxxx; 对应的属性方法如下表：（js语法存在和css语法中style设置有些区别和转换）盒子标签和属性对比 CSS语法（不区分大写和小写） JavaScript语法（区分大写和小写） border border border-bottom borderBottom border-bottom-c

js 怎么给内容添加样式,js往div中添加元素

chatgpt002的博客

10-14

509

但是要注意的是，有些CSS样式名称是由几个单词组成的例如font-size、background-image等，他们都是用破折号(-)连接起来的，然而JavaScript中破折号表示“减”，因此不能作为属性名称。这种方法权重是最高的，直接写在节点的style属性上，他会覆盖其他方法设置的样式。这种方法违背了表现和行为分离的原则，一般只适合定义元素经常变化的即时样式(与行为相关)，例如一个可用于拖拽的p，随着拖拽，他的top、left属性是不断变换的，此时就不能用class或。改变节点class或id；

js元素样式设置方式

qq_45907365的博客

03-23

691

对以下代码用js设置样式有几种方法

js操作样式类——JS

mantou_riji的博客

04-09

418

通过JS修改CSS的常用方法是：对象.style.属性 = “属性值” 如： box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor ="red"; 这样做的缺点：通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。所以可以直接修

在JavaScript中添加css样式 js追加类

withkai44的博客

11-27

2530

JavaScript也可以通过修改已有的样式表来添加CSS样式。六、使用JavaScript可以通过动态创建样式表 style标签来添加CSS样式。这个代码也将所有p元素的文字颜色设为蓝色。这个代码将所有p元素的文字颜色设为蓝色。二、jquery中添加类的方法。三、检查是否含有某个类的方法。一、原生js中添加类的方法。七、修改已有的样式表。

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 样式值都是字符串类型，如果需要进行比较或计算，需要进行类型转换。

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

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

提交