JS修改css样式的几种方法

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年9月28日 1:7 本文热度 436

本文试验了几种JS修改css样式的方法：
方法1：元素.style.样式=样式值。
方法2：元素.style.cssText=样式：样式值
方法3：元素.style[样式]=样式值

.cssText这种，可以用一行改变本元素多个样式，直接后面写很多css样式。
.style.样式，这种，逐个样式进行修改。
如果样式有-短线，如background-color,可以用方法3，style跟着样式加中括号。

测试代码：

<style>#D1{background-color:#fcfe3f;padding:50px;margin:11px;border:10px solid blue;width:200px;}</style>
</head>
<body>
<input type="radio" id="r1" name="s" onclick="YB()" checked>黄蓝(默认）
<input type="radio" id="r2" name="s" onclick="PR()">粉红
<input type="radio" id="r3" name="s" onclick="GY()">绿黄
<br>
<div id="D1">文字</div>
<script language="javascript" type="text/javascript">   
 function YB(){
     document.getElementById("D1").style.background="#fcfe3f";
     document.getElementById("D1").style.border="10px solid blue";
 };
function PR(){
     document.getElementById("D1").style.cssText="background:#e87ca2;border:10px solid red";
 };
function GY(){
     document.getElementById("D1").style['background-color']="#84d192";//带-号的css样式用这个格式
     document.getElementById("D1").style['border']="10px solid #fcfe3f";
 };
</script>

图示：点击单选框，选择不同的背景色和边框色。

该文章在 2023/9/28 1:07:49 编辑过

关键字查询

css

样式

修改

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。