zoukankan      html  css  js  c++  java
  • JavaScript修改CSS属性的实例代码

    用原生的javascript修改CSS属性的方法。
    用JavaScript修改CSS属性 只有写原生的javascript了。 
    1.用JS修改标签的 class 属性值: 
    class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。 
    更改一个标签的 class 属性的代码是: 
    document.getElementById( id ).className = 字符串; 
    document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。 
    利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。 
    举例: 
    <style type="text/css"> 
    .txt { 
    font-size: 30px; font-weight: bold; color: red; 
    </style> 
    <div id="tt">欢迎光临!脚本学堂,www.jbxue.com</div> 
    <p><button onclick="setClass()">更改样式</button></p> 
    <script type="text/javascript"> 
    function setClass() 
    document.getElementById( "tt" ).className = "txt"; 
    </script> 
    2.用JS修改标签的 style 属性值: 
    style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。DOM 对象也有 style 属性,不过这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一对应的,当改变了 Style 对象的属性时,对应标签的 CSS 属性值也就改变了,所以这属于第二种修改方法。 
    更改一个标签的 CSS 属性的代码是: 
    document.getElementById( id ).style.属性名 = 值; 
    document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。 
    说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。 
    举例: 
    div id="t2">欢迎光临!</div> 
    <p><button onclick="setSize()">大小</button> 
    <button onclick="setColor()">颜色</button> 
    <button onclick="setbgColor()">背景</button> 
    <button onclick="setBd()">边框</button> 
    </p> 
    <script type="text/javascript"> 
    function setSize() 
    document.getElementById( "t2" ).style.fontSize = "30px"; 
    } www.jbxue.com
    function setColor() 
    document.getElementById( "t2" ).style.color = "red"; 
    function setbgColor() 
    document.getElementById( "t2" ).style.backgroundColor = "blue"; 
    function setBd() 
    document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
    </script> 
  • 相关阅读:
    windwos8.1英文版安装SQL2008 R2中断停止的解决方案
    indwows8.1 英文版64位安装数据库时出现The ENU localization is not supported by this SQL Server media
    Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds
    SQL数据附加问题
    eclipse,myeclipse中集合svn的方法
    JAVA SSH 框架介绍
    SSH框架-相关知识点
    SuperMapRealSpace Heading Tilt Roll的理解
    SuperMap iserver manage不能访问本地目的(IE9)
    Myeclipse中js文件中的乱码处理
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3672380.html
Copyright © 2011-2022 走看看