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

news/2024/7/10 1:53:27 标签: js, vue

参考: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;

}

以下是jsdocument.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";
  }
},

http://www.niftyadmin.cn/n/1691245.html

相关文章

qt xml组包_QT平台下基于XML的界面设计与管理(上)

1 引言用户界面是软件系统的重要组成部分&#xff0c;是对软件的人 机交互、操作逻辑、界面美观的整体设计&#xff0c;是系统和用户之 间进行交互和信息交换的媒介&#xff0c;它实现信息的内部形式与人 类可以接受的形式之间的转换。QT是一个完整的应用程序 开发框架&#x…

element ui中el-radio和el-checkbox点击触发两次事件处理方法

参考&#xff1a;https://blog.csdn.net/ChengShengMeJia/article/details/108147612 找了半天原因&#xff0c;后来发现是el-radio被封装多层&#xff0c;根元素不是input&#xff0c; 我认为是由于事件冒泡机制导致的&#xff0c;因为根元素是label&#xff0c;click事件绑定…

5w2h原则指的是什么_营销方案撰写一学就会的5W2H原则

大学未毕业便进入营销行业&#xff0c;在销售一线&#xff0c;不可避免的核心工作之一便是与方案撰写打交道&#xff0c;后来&#xff0c;机缘巧合&#xff0c;入职职能部门&#xff0c;从单纯写方案的人&#xff0c;变成了又写又看的人&#xff0c;每年看的方案不下大几百份&a…

StringRedisTemplate操作redis数据

原文链接&#xff1a;https://www.cnblogs.com/java-gcs/p/11024530.html StringRedisTemplate与RedisTemplate区别点 两者的关系是StringRedisTemplate继承RedisTemplate。两者的数据是不共通的&#xff1b;也就是说StringRedisTemplate只能管理StringRedisTemplate里面的数…

java实训项目_JAVA学习那些事:好比是打怪升级,修炼升仙的过程

对于学习任何新的知识来说&#xff0c;都有自学和教学(学校教学)两种学习方式。教学方式肯定简单&#xff0c;只要交学费按照老师的章程和计划来学习。针对想自学JAVA的人来说&#xff0c;这个肯定有些难度&#xff0c;毕竟JAVA是一门思维逻辑强的专业技能知识。不过你的好学心…

datagrid jeesite 子表显示到datagrid_基于 Angular Material 的 Data Grid 设计实现

自 Extensions 组件库发布以来&#xff0c;Data Grid 成为了使用及咨询最多的组件。最开始 Data Grid 的设计非常简陋&#xff0c;经过一番重构&#xff0c;组件质量已经有了质的提升。Extensions 组件库&#xff1a;https://github.com/ng-matero/extensionsData Grid 示例&am…

python案例演示_Python之time模块案例演示

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼案例01: 2008年8月8日20:08:08 往后88,888,888秒是哪天&#xff1f;星期几&#xff1f;日期->时间戳(浮点数)->可以做数学运算演示&#xff1a;import time# 构造日期的元组&#xff0c;元组必须是9位标准的tuple01 (2008, …

SQL查询出来的时间和数据库存的时间不一致问题解决

参考一&#xff1a;https://blog.csdn.net/Tony_wang000/article/details/105514640?utm_mediumdistribute.pc_relevant.none-task-blog-baidujs_title-0&spm1001.2101.3001.4242 参考二&#xff1a;https://blog.csdn.net/q283614346/article/details/90737288 原因一&a…