ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JS | javascript修改元素的style属性

2022-07-27 00:35:48  阅读:170  来源: 互联网

标签:style color javascript JS let div document css


基础代码

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. 效果

image


一、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 效果

image
image


二、直接设置属性名

直接对属性名进行设置,有缺陷,只有部分样式生效
添加到嵌入式的 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 效果

image
image


三、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 效果

image

image


四、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 效果

image

image


五、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 效果

image
image

完整代码

点击查看代码
<!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>

标签:style,color,javascript,JS,let,div,document,css
来源: https://www.cnblogs.com/bkzj/p/16479511.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有