js通过标签元素id，用document.getElementById().style设置标签元素的css属性

→_→BéLieve

已于 2022-08-29 17:58:08 修改

阅读量1.4w

点赞数 3

分类专栏： workStudy 文章标签： js vue

于 2021-07-07 11:22:07 首次发布

本文链接：https://blog.csdn.net/weixin_46099269/article/details/118542827

版权

JavaScript CSS DOM操作 HTML元素样式修改

关键词由CSDN通过智能技术生成

workStudy 专栏收录该内容

97 篇文章

订阅专栏

这篇博客介绍了两种JavaScript方法来动态修改HTML元素的CSS样式。第一种是通过getElementById直接设置display属性，第二种是利用with语句批量设置多个样式属性。示例代码展示了如何根据元素当前颜色切换其背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://blog.csdn.net/kissing7/article/details/8924112

对定义了id的html标签元素，js可以通过以下方法修改标签元素的css样式：

方法一：

对标签定义一个css样式：

document.getElementById("idname").style.display="none";

方法二：

对标签定义多个css样式：

var a = document.getElementById("idname");

with(a.style){
color = red;

font-size = 12px;

…

}

以下是js中document.getElementById("idname").stylexxx属性可以定义的css属性对照

在这里插入图片描述

个人使用

<h4>选择播放站点</h4>
<div class="content_bottom">
  <div
    class="content_bottom_item"
    v-for="(item, index) in playPoint"
    :key="index"
    @click="pointDivClick(index)"
  >
    <el-checkbox
      :label="item"
      v-model="point[index]"
      size="medium"
      style="color: #bbbb; font-size: 25px; font-weight: 900"
      @click.native="SkipProgress($event)"
    ></el-checkbox>
  </div>
</div>

// 点击方框选中站点和修改颜色
pointDivClick(index) {
  this.point[index] = !this.point[index];
  let icon = document.getElementById("id"+index);
  console.log(icon.style.color);
  if(icon.style.color == "" || icon.style.color == "blue"){
    icon.style.color = "yellow";
  }else {
    icon.style.color = "blue";
  }
},