zoukankan      html  css  js  c++  java
  • 【JS新手教程】JS修改css样式的几种方法

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

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

     

  • 相关阅读:
    WebService基于SoapHeader实现安全认证
    js中SetInterval与setTimeout用法
    Fiddler 教程
    jQuery 的 serializeArray()、serialize() 方法
    Javascript中Array.prototype.map()详解
    MS DOS 命令大全
    Chrome的JS调试工具
    jquery插件之DataTables 参数介绍
    C#中的Params、ref、out的区别
    C#记录日志、获取枚举值 等通用函数列表
  • 原文地址:https://www.cnblogs.com/huaxie/p/11692109.html
Copyright © 2011-2022 走看看