精华内容
下载资源
问答
  • javascript修改CSS

    2014-11-29 13:04:08
    1.js修改单个元素的css属性  document.getElementByIdx('obj').className=”…”, document.getElementByIdx('obj').style.backgroundColor=”#003366″, 2.js修改整个页面的css属性  3.jscss的style...

    1.js修改单个元素的css属性    

    document.getElementByIdx('obj').className=”…”,

    document.getElementByIdx('obj').style.backgroundColor=”#003366″,

    2.js修改整个页面的css属性     

    <link rel = "stylesheet"type="text/css" id="css" href="firefox.css"/>
    <spanon click="javascript:document.getElementByIdx('css').href ='ie.css'"></span>

    3.js和css的style属性对照表

    盒子标签和属性对照
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
    border border
    border-bottom borderBottom
    border-bottom-color borderBottomColor
    border-bottom-style borderBottomStyle
    border-bottom-width borderBottomWidth
    border-color borderColor
    border-left borderLeft
    border-left-color borderLeftColor
    border-left-style borderLeftStyle
    border-left-width borderLeftWidth
    border-right borderRight
    border-right-color borderRightColor
    border-right-style borderRightStyle
    border-right-width borderRightWidth
    border-style borderStyle
    border-top borderTop
    border-top-color borderTopColor
    border-top-style borderTopStyle
    border-top-width borderTopWidth
    border-width borderWidth
    clear clear
    float floatStyle
    margin margin
    margin-bottom marginBottom
    margin-left marginLeft
    margin-right marginRight
    margin-top marginTop
    padding padding
    padding-bottom paddingBottom
    padding-left paddingLeft
    padding-right paddingRight
    padding-top paddingTop
     
    颜色和背景标签和属性对照
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
    background background
    background-attachment backgroundAttachment
    background-color backgroundColor
    background-image backgroundImage
    background-position backgroundPosition
    background-repeat backgroundRepeat
    color color
     
    样式标签和属性对照
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
    display display
    list-style-type listStyleType
    list-style-image listStyleImage
    list-style-position listStylePosition
    list-style listStyle
    white-space whiteSpace
     
    文字样式标签和属性对照
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
    font font
    font-family fontFamily
    font-size fontSize
    font-style fontStyle
    font-variant fontVariant
    font-weight fontWeight
     
    文本标签和属性对照
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
    letter-spacing letterSpacing
    line-break lineBreak
    line-height lineHeight
    text-align textAlign
    text-decoration textDecoration
    text-indent textIndent
    text-justify textJustify
    text-transform textTransform
    vertical-align verticalAlign

    4.引起css改变的js事件

    HTML 4.0 的新特性之一是有能力使 HTML事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

    FF: Firefox, N:Netscape, IE: Internet Explorer

     

    属性当以下情况发生时,出现此事件FFNIE
    onabort图像加载被中断134
    onblur元素失去焦点123
    onchange用户改变域的内容123
    onclick鼠标点击某个对象123
    ondblclick鼠标双击某个对象144
    onerror当加载文档或图像时发生某个错误134
    onfocus元素获得焦点123
    onkeydown某个键盘的键被按下143
    onkeypress某个键盘的键被按下或按住143
    onkeyup某个键盘的键被松开143
    onload某个页面或图像被完成加载123
    onmousedown某个鼠标按键被按下144
    onmousemove鼠标被移动163
    onmouseout鼠标从某元素移开144
    onmouseover鼠标被移到某元素之上123
    onmouseup某个鼠标按键被松开144
    onreset重置按钮被点击134
    onresize窗口或框架被调整尺寸144
    onselect文本被选定123
    onsubmit提交按钮被点击123
    onunload用户退出页面123
    展开全文
  • JavaScript修改CSS

    千次阅读 2008-06-28 16:16:00
    JavaScript修改CSS1、修改元素的CSS名称: function change(id, newClass) { identity=document.getElementById(id); identity.className=newClass; } .first { color: black;} .second {

    JavaScript修改CSS

    1、修改元素的CSS名称:

    <script language="JavaScript">

     function change(id, newClass)

    {

       identity=document.getElementById(id);

       identity.className=newClass;

    }

     </script>

    <style type="text/css">

    .first {

       color: black;

    }

     .second

    {

       color: red;

    }

     </style>

     

    <h1 class="first" id="changeme">Changeable text</h1>

    <a href="javascript:;" onClick="change('changeme', 'second');">RED</a> | <a href="javascript:;"  onClick="change('changeme', 'first');">BLACK</a>

    2、修改CSS的属性

    <script language="JavaScript">

     function changecss(theClass,element,value)

     {

       var cssRules;

       if (document.all)

       {

        cssRules = 'rules';

        }

        else if (document.getElementById)

       {

         cssRules = 'cssRules';

        }   

      for (var S = 0; S < document.styleSheets.length; S++)

       {

         for (var R = 0; R < document.styleSheets[S][cssRules].length; R++)

         {

           if (document.styleSheets[S][cssRules][R].selectorText == theClass)

          {

             document.styleSheets[S][cssRules][R].style[element] = value;

           }

         }

        }

    }

     </script>

     

    <span class="exampleA">Example A</span>

    <span class="exampleB">Example B</span>

    <span class="exampleA">Example A</span>

    <input type="button" value="Change A Red" οnclick="changecss('.exampleA','color','red')"/>

    <input type="button" value="Change A Black" οnclick="changecss('.exampleA','color','black')"/>

    展开全文
  • JS修改CSS

    千次阅读 2009-09-14 11:20:00
    js修改css详解2009-02-07 15:11出处请看这里:http://hi.baidu.com/ahbzhehu/blog/item/3237bc301da8cc9ea9018ec0.htmlabc.cssCSS code.class1 { width:10px; background-color: red; }HTML codeDOCTYPE ...

    js修改css详解2009-02-07 15:11出处请看这里:http://hi.baidu.com/ahbzhehu/blog/item/3237bc301da8cc9ea9018ec0.html

    abc.css

    CSS code

    .class1 
        {
        width:10px;
        background-color: red;
        }

    HTML code


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <link rel="stylesheet" type="text/css" href="abc.css" />

    <TITLE> New Document </TITLE>
    <script>
    window.onload=fnInit;
    function fnInit(){
    // 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
    var oStyleSheet=document.styleSheets[0];
    var oRule=oStyleSheet.rules[0];
    oRule.style.backgroundColor="#0000FF";
    }

    </script>
    </HEAD>

    <BODY>
    <div class="class1">aaa</div>
    </BODY>
    </HTML>

    (2)


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>

    <style type="text/css">
    <!--
    #apDiv1 {
        position:absolute;
        width:399px;
        height:195px;
        z-index:1;
        border:1px solid #000;
        background-color:#CCCCCC;
    }
    -->
    </style>

    <script>
    window.onload = function(){
        alert(document.getElementById('apDiv1').currentStyle.width)
    }

    </script>

    </HEAD>

    <BODY>
    <div id="apDiv1">aaa</div>


    </BODY>
    </HTML>


    还可以用   document.styleSheets(i).href   可以知道当前页面中引用的每个css的文件!

    另:CSS属性与JavaScript编码对照表

    (一定要注意, 上次本人_何向阳,在使用js修改css的中margin-left属性时,总报"left"未定义,后来,找了好多资料,才发现在js中,margin-left的写法为:marginLeft,恍然大悟,希望遇到相同问题的朋友,谨慎对待。)

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

        比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:JavaScript中style后面的属性应该是什么?
    <script type="text/javascript">    
        function imageOver(e) {    
            e.style.border="1px solid red";    
        }    
        function imageOut(e) {    
            e.style.borderWidth=0;    
        }    
    </script>


    <img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" /> 

        JavaScript CSS Style属性对照表

        盒子标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
    border   border 
    border-bottom   borderBottom 
    border-bottom-color   borderBottomColor 
    border-bottom-style   borderBottomStyle 
    border-bottom-width   borderBottomWidth 
    border-color   borderColor 
    border-left   borderLeft 
    border-left-color   borderLeftColor 
    border-left-style   borderLeftStyle 
    border-left-width   borderLeftWidth 
    border-right   borderRight 
    border-right-color   borderRightColor 
    border-right-style   borderRightStyle 
    border-right-width   borderRightWidth 
    border-style   borderStyle 
    border-top   borderTop 
    border-top-color   borderTopColor 
    border-top-style   borderTopStyle 
    border-top-width   borderTopWidth 
    border-width   borderWidth 
    clear   clear 
    float   floatStyle 
    margin   margin 
    margin-bottom   marginBottom 
    margin-left   marginLeft 
    margin-right   marginRight 
    margin-top   marginTop 
    padding   padding 
    padding-bottom   paddingBottom 
    padding-left   paddingLeft 
    padding-right   paddingRight 
    padding-top   paddingTop


        颜色和背景标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
    background   background 
    background-attachment   backgroundAttachment 
    background-color   backgroundColor 
    background-image   backgroundImage 
    background-position   backgroundPosition 
    background-repeat   backgroundRepeat 
    color   color 
        样式标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
    display   display 
    list-style-type   listStyleType 
    list-style-image   listStyleImage 
    list-style-position   listStylePosition 
    list-style   listStyle 
    white-space   whiteSpace 
        文字样式标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
    font   font 
    font-family   fontFamily 
    font-size   fontSize 
    font-style   fontStyle 
    font-variant   fontVariant 
    font-weight   fontWeight 
        文本标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写) 
    letter-spacing   letterSpacing 
    line-break   lineBreak 
    line-height   lineHeight 
    text-align   textAlign 
    text-decoration   textDecoration 
    text-indent   textIndent 
    text-justify   textJustify 
    text-transform   textTransform 
    vertical-align   verticalAlign




    obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=""),看一下代码


    XML/HTML代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml">   
    <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>JS获取CSS属性值</title>   
    <style type="text/css">   
    <!-- 
    .ss{color:#cdcdcd;} 
    -->   
    </style>   
    </head>   
       
    <body>   
    <div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS获取CSS属性值</div>   
    <script type="text/javascript">   
         alert(document.getElementById("css88").style.width);//200px    
         alert(document.getElementById("css88").style.color);//空白    
    </script>       
    </body>   
    </html>  

    上面这个例子对id为"css88"的div设置了2种烦事的样式,包括style和外部样式class。

    从alert出来的信息可以看到,document.getElementById("css88").style方法获取不到class为ss的属性和值。

    那么这么样才能获取到class为ss的属性和值呢?

    IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。

    网上一个比较方法是:


    XML/HTML代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml">   
    <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>S获取CSS属性值</title>   
       
    <style type="text/css">   
    <!-- 
    .ss{background:blue; color:#cdcdcd; width:200px} 
    -->   
    </style>   
    </head>   
       
    <body>   
    <p id="qq" class="ss" >sdf</p>   
       
    <script type="text/javascript">   
    function GetCurrentStyle (obj, prop) {      
         if (obj.currentStyle) {         
             return obj.currentStyle[prop];      
         }       
         else if (window.getComputedStyle) {         
            propprop = prop.replace (/([A-Z])/g, "-$1");            
            propprop = prop.toLowerCase ();         
             return document.defaultView.getComputedStyle (obj,null)[prop];      
         }       
         return null;    
    }    
    var dd=document.getElementById("qq");    
    alert(GetCurrentStyle(dd,"width"));    
    </script>   
    </body>   
    </html>  

    当然,如果您是引用外部的css文件同样适用。

    另:可以将上面的方法简化为

    JavaScript代码
    function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性    
    return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];    
    }  

    展开全文
  • 通过JS修改CSS样式

    万次阅读 2019-08-03 08:25:19
    通过JS修改CSS样式有两种方法: 修改某一属性的值 修改某一元素的class名,使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <head> <meta ...

    通过JS修改CSS样式有两种方法:

    1. 修改某一属性的值
    2. 修改某一元素的class名,使其被别的样式修饰

    修改某一属性的值

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<title></title>
    	<script type="text/javascript">
    		function changeBg(){
    			var bgColor="";
    			for(var i = 0;i<6;i++){
    				bgColor += ""+Math.round(Math.random()*9);
    			}
    			document.body.style.backgroundColor="#"+bgColor;
    		}
    		document.onclick = changeBg;
    	</script>
    </head>
    <body>
    
    </body>
    </html>

    如上,通过for循环建立一个6位数字构成的字符串再加上#,形成能够作为颜色属性的字符串(颜色有一种表达方式就是这样。如:#324254),然后将这个值赋给body的样式属性background-color(JS中写法位backgroundColor),达到我们修改样式的目的

    修改某一元素的class名

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<title></title>
    	<script type="text/javascript">
    		function chg(){
    			document.getElementById("up").className="solid";
    		}
    	</script>
    	<style type="text/css">
    		.solid{
    			width: 160px;
    			padding: 6px;
    			text-align: center;
    			border-right: #222 4px solid;
    			border-top: 4px solid #ddd;
    			border-left: 4px solid #ddd;
    			border-bottom: 4px solid #222;
    			background-color: #ccc;
    		}
    	</style>
    </head>
    <body>
    	<div id="up">whoami</div>
    	<input type="button" name="a" value="点击" onclick="chg();">
    </body>
    </html>

    通过 JS,将id为“up”的元素的class名改为solid,使其被.solid样式修饰,达到我们修改样式的目的

    以上两种方式能够达到我们修改元素样式的目的

     

    希望能够帮助大家,如果有错,欢迎大家批评指正,也欢迎将不懂的地方评论出来,我们一起讨论学习

    展开全文
  • 修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的
  • NULL 博文链接:https://canfly2010.iteye.com/blog/412069
  • js 修改css文件

    千次阅读 2018-12-21 13:43:44
    document.styleSheets[0] 即可得到你所应用的第一个css rules 和 cssRules 的计数方法是不一样的!rules 是第几个选择器;cssRules 是第几条规则 document.styleSheets[0].cssRules即可得到所有css文件行 document....
  • js修改css属性、html属性

    千次阅读 2017-01-10 22:56:23
    js修改html属性: 1.document.getElementById('cloimg').setAttribute("src","/home/images/open.gif");...2. $('#cloimg').setAttribute("src","/home/images/open.gif");...js修改css属性:
  • JS修改css方法

    千次阅读 2018-05-30 13:31:17
    // 4 // 使用更改外联的css文件,从而改变元素的css,是实现整体页面换肤的最佳方案 // var obj = document.getElementById(“css”); obj.setAttribute(“href”,“css2.css”); // 引入外部css function ...
  • 原生JS修改CSS属性

    万次阅读 2019-08-06 18:15:23
    原生JS修改CSS属性有以下三种方法 修改style样式 通过document.styleSheets[n] // n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到该样式表的css内容,通过style修改特定...
  • JavaScript修改CSS属性

    千次阅读 2013-12-10 09:59:13
    目前,网页上多数格式都是利用CSS定义,很少...用JavaScript修改标签的样式主要有两种做法:一是用另一个CSS样式表代替标签现在CSS样式表,二是直接修改标签的CSS样式表中的属性。 用JS修改标签的 class 属性值: cla
  • JS修改css样式的8种方式

    千次阅读 2019-04-12 20:59:36
    JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式 element . className = 'blue' ; element . className += 'blue fb' ; 设置cssText element . style . ...
  • js修改css属性值

    千次阅读 2019-05-30 17:22:00
    推荐用dom.style.setProperty('属性','属性值'); 例如: $("#id")[0].style.setProperty('margin-top','1px'); 也可以用dom.style.属性=属性值; 但是却不太好用,比如下面这个就没有成功 ...转载于:htt...
  • 理解 :root 和 var() ...css 1 :root { 2 --view-height: 0; 3 } 在:root选择器中定义自定义属性意味着它们可以作用于全局文档中所有元素。:root是一个CSS伪类,它匹配文档的根元素 –<htm...
  • JavaScript修改CSS属性函数

    千次阅读 2008-04-10 08:42:00
    使用JavaScript可以控制页面大小(见《JavaScript判断页面大小的函数》),如果需要根据页面大小来调整某个HTML标签的CSS的属性,比如高或者宽什么的,如果使用ID来控制也可以,戒烟如你觉得有点复杂了,从网上找了...
  • 利用js修改 css样式 注意点 !important

    千次阅读 2015-10-25 10:38:40
    当你发现 你利用js 脚本修改 css样式变量的时候,命名 脚本写的正确,但是修改不过来,则查看 css样式中 是否使用了  !important;
  • CSS伪元素:before和:after可以实现很多有趣的功能,我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素。伪元素可以用来定义样式,但是和正常的dom元素不同,我们没有办法选中这些伪元素...
  • 通过js修改css伪类after,before等样式

    千次阅读 2017-06-10 17:53:06
    问题所在:由于伪类(after,before)不能通过js添加行间样式style,所以无法修改伪类样式。 解决方法:在元素上新增class,通过css优先级来实现 1、通过$(“.box”).addClass(“pox”);实现 ...
  • javascript修改css的class名字

    千次阅读 2014-10-14 09:37:06
    山  $("li").removeClass('on');  $(buttomId).addClass("on");

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 428,254
精华内容 171,301
关键字:

js改css