本文试验了几种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>

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

【JS新手教程】JS修改css样式的几种方法的更多相关文章

  1. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  2. jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存

    代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...

  3. vux修改css样式的2种办法

      最近手上有个移动端的项目.前端UI框架是选择的VUX.但是在使用的时候经常会发现框架自带的组件样式和我们要求的不一致.经常需要手动覆盖样式.这里记录下我们使用的2种方法. 我们以XHeader组件 ...

  4. 原生javascript 获得css样式有几种方法？

    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", ...

  5. HTML引入CSS样式的四种方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式          行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...

  6. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  7. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  8. HTML页面中插入CSS样式的三种方法

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...

  9. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

随机推荐

  1. C# 遍历 enum 枚举

    foreach (Suit suit in (Suit[]) Enum.GetValues(typeof(Suit))) { } 注意:强制转换(Suit[])不是必需的,但确实使代码快0.5 ns.

  2. RookeyFrame Bug 线上创建的DLL被删除了 模块无法删除 临时解决

    不知道什么情况 在线创建模块,DLL被删除了,但是模块的相关数据无法删除.可以按照下面的方法临时用一下. 产生这个的原因,好像是Config里面的NeedInit一直都是true,没有改为false, ...

  3. cgp的辣鸡比赛题解

    目录 cgp的gcd 题目链接 思路 代码 cgp调戏妹子 题目链接 思路 代码 cgp的序列 题目链接 思路 代码 cgp的背包 题目链接 思路 代码 cgp的gcd 题目链接 传送门 思路 首先看 ...

  4. javascript练习题

    function Vertex(city, x) { this.name = city; this.num = x; } var node0 = new Vertex("邯郸", ...

  5. 转载：Spark GraphX详解

    1.GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理框架,它是基于Spark平台提供对图计算和图挖掘简洁易用的而丰富的接口,极大的方便了对分布式图处理的需求. ...

  6. 常用命令备忘 xargs

    xargs 作为使用率很高的命令,但是长久不用就会模糊了记忆,所以要记录下来. 获取所有的cobbler相关的布尔值然后全部设置为真 getsebool -a|grep cobbler|awk '{p ...

  7. Oracle自动备份（多个库），压缩打包，删除原文件

    1.创建一个database_Backup.bat文件,用记事本打开 内容参考如下:(楼主这里自动备份了四个数据库) set "now=%date:~0,4%%date:~5,2%%date ...

  8. Java ArrayList几种遍历方法

    import java.util.ArrayList; import java.util.Iterator; public class StringSampleDemo { public static ...

  9. git用ssh方式下载代码

    1.运行Git Bash客户端,执行ls ~/.ssh; 如果列出下图这两个rsa文件,那应该就不需要配置ssh key了,如果不放心就将这几个文件删掉,重新生成. 文件的默认目录:C:\Users\ ...

  10. Zabbix优化

    参考 zabbix默认的配置即使机器128核心,256内存,只能抗住10-20台的监控,如果再多就需要修改配置了. 一.配置文件 server端配置文件添加如下 StartPollers=160 St ...