JS | javascript修改元素的style属性

2022/7/27 14:22:57

编程Tag： js javascript let css div style color document

本文主要是介绍JS | javascript修改元素的style属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

基础代码

1. HTML 代码

<div>原样式</div>

2. CSS 样式

div {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border: 1px solid red;
  margin-bottom: 30px;
  text-align: center;
}

3. 效果

一、className设置类名

通过改变元素的类名，从而使 CSS 样式发生变化
改变 class 类名

1.1 HTML 代码

简单加个类名

<div id="className">className</div>

1.2 CSS 样式

简单写个类名

.bgYellow {
  background-color: yellow;
}

1.3 JavaScript 代码

let div = document.querySelector('#className')
div.className = 'bgYellow'

1.4 效果

二、直接设置属性名

直接对属性名进行设置，有缺陷，只有部分样式生效
添加到嵌入式的 css 样式中

2.1 HTML 代码

<div id="directly">直接设置属性</div>

2.2 JavaScript 代码

let div = document.querySelector('#directly')
div.style.backgroundColor = 'blue'
div.style.color = '#fff'

2.3 效果

三、style.cssText

本质就是设置元素的 style 的属性值
添加到嵌入式的 css 样式中

3.1 HTML 代码

<div id="cssText">cssText</div>

3.2 JavaScript 代码

let div = document.querySelector('#cssText')
div.style.cssText = 'background-color:green;'
div.style.cssText += 'color:#fff;'

3.3 效果

四、setAttribute()

增加一个指定名称和值的新属性,或者修改已有属性的值

4.1 HTML 代码

<link rel="stylesheet" href="css1.css" id="css">
<div id="setAttribute">setAttribute</div>

4.2 JavaScript 代码

// 可以直接修改 link 的引入文件
let css = document.querySelector('#css')
css.setAttribute('href', 'css2.css')

let div = document.querySelector('#setAttribute')
div.setAttribute('style', 'background-color:pink; color:#fff;')

4.3 效果

五、setProperty

用于新增一个新的 css 属性,或者修改已有的属性
添加到嵌入式的 css 样式中

5.1 HTML 代码

<div id="setProperty">setProperty</div>

5.2 JavaScript 代码

let div = document.querySelector('#setProperty')
div.style.setProperty('background-color', 'red')
div.style.setProperty('color', '#fff')

5.3 效果

完整代码

点击查看代码

<!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>
    <link rel="stylesheet" href="css1.css" id="css" />
    <style>
      div {
        width: 200px;
        height: 60px;
        line-height: 60px;
        border: 1px solid red;
        margin-bottom: 30px;
        text-align: center;
      }

      .bgYellow {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div>原样式</div>
    <div id="className">className</div>
    <div id="directly">直接设置属性</div>
    <div id="cssText">cssText</div>
    <div id="setAttribute">setAttribute</div>
    <div id="setProperty">setProperty</div>

    <script>
      {
        // 通过 className 设置类名
        let div = document.querySelector('#className')
        div.className = 'bgYellow'
      }
      {
        // 直接设置属性
        let div = document.querySelector('#directly')
        div.style.backgroundColor = 'blue'
        div.style.color = '#fff'
      }
      {
        // 通过 cssText 设置属性
        let div = document.querySelector('#cssText')
        div.style.cssText = 'background-color:green;'
        div.style.cssText += 'color:#fff;'
      }
      {
        // 通过 setAttribute 设置属性
        let css = document.querySelector('#css')
        css.setAttribute('href', 'css2.css')

        let div = document.querySelector('#setAttribute')
        div.setAttribute('style', 'background-color:pink; color:#fff;')
      }
      {
        // 通过 setProperty 设置属性
        let div = document.querySelector('#setProperty')
        div.style.setProperty('background-color', 'red')
        div.style.setProperty('color', '#fff')
      }
    </script>
  </body>
</html>

这篇关于JS | javascript修改元素的style属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！