精华内容
下载资源
问答
  • class属性修改  类属性class属性,规定类名.  用类选择器规定样式的时候,需要为元素指定类名,即class属性的值.  注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,...
  • JS直接修改CSS属性/id属性/class属性

    万次阅读 2017-09-01 23:12:11
    关键函数: document.createAttribute(‘style’):创建属性节点 obj.setAttributeNode(attr_node):向obj元素中添加指定的属性值 <!DOCTYPE html> 直接修改style属性 <style>

    直接修改CSS属性关键函数:
    document.createAttribute(‘style’):创建属性节点
    obj.setAttributeNode(attr_node):向obj元素中添加指定的属性值
    obj.attributes[‘style’]:获取obj元素的style属性值
    obj.setAttribute(nameString,valueString):为obj元素的nameStirng属性赋值为valueString


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>直接修改style属性</title>
        <style>
            #frm{
                border:1px solid #00f;
                width: 200px;
                height: 20px;
            }
        </style>
    </head>
    <body>
        <div id="frm"></div>
        <button onclick="changebgcolor()">更改背景颜色</button>
        <button onclick="changebdcolor()">更改边框颜色</button>
        <script>
            var bg = 0xffff;
            var bd = 0xffff;
            function getColor(str){
                var len = str.length;
                if(len<=6){
                    for(var i=0;i<6-len;i++){
                        str ='0'+str;
                    }
                }else{
                    str = str.slice(len-6, len);
                }
                return str;
            }
            function changebgcolor(){
                var obj = document.getElementById('frm');
                if(obj.attributes['style'] == undefined){
                    // 创建属性节点
                    var attr_node = document.createAttribute('style');
                    // 向元素中添加指定的属性节点
                    obj.setAttributeNode(attr_node);
                }
                // 获取原先style属性的值
                var s = obj.attributes[obj.attributes.length-1].value;
                // 重新添加属性值
                obj.attributes[obj.attributes.length-1].value = s+'background:#'+getColor(bg.toString())+";";
                bg = bg<<2;
            }
            function changebdcolor(){
                var obj = document.getElementById('frm');
                if(obj.attributes['style'] == undefined){
                    var attr_node = document.createAttribute('style');
                    var text_node = document.createTextNode('');
                    obj.setAttributeNode(attr_node);
                }
                var s = obj.attributes[obj.attributes.length-1].value;
                obj.attributes[obj.attributes.length-1].value = s+'border-color:#'+getColor(bd.toString())+';';
                bd = bd<<2;
            }
        </script>
    </body>
    </html>

    通过点击按钮即可更改背景或者边框的颜色.
    补充:
    有些浏览器若不定义style的属性值,则不会存在该style节点,而有的浏览器style节点依然存在(如IE)。一般来说style属性的子节点为#text节点,但有的浏览器不支持属性节点添加子节点(如Chrome浏览器)。
         虽然IE浏览器一直存在style属性节点(即obj.attributes[‘style’].nodeType为2),但是不可以使用nodeValue对其赋值,所以将上述代码修改为如下即可,可支持Chrome浏览器、FireFox浏览器及IE浏览器

    //修改两个方法如下:
            function changebgcolor(){
                var obj = document.getElementById('frm');
                var s = obj.style.cssText;
                obj.style.cssText = s+"background:#"+getColor(bg.toString())+";";
                bg = bg<<2;
            }
            function changebdcolor(){
                var obj = document.getElementById('frm');
                var s = obj.style.cssText;
                obj.style.cssText = s+'border-color:#'+getColor(bd.toString())+";";
                bd = bd<<2;
            }

    而在低版本的IE浏览器使用上述代码,由于style重复属性过多或者由于浏览器的缺陷,会影响样式的显示,可以修改为如下代码,同样适用于Chrome浏览器、FireFox浏览器及IE浏览器

    obj.style['background'] = "#"+getColor(bg.toString());
    obj.style['borderColor'] = "#"+getColor(bd.toString());
    
    //或者
    obj.style.background = "#"+getColor(bg.toString());
    obj.style.borderColor = '#"+getColor(bd.toString());

    直接修改id属性/class属性
    obj.className = ‘classname’:将obj元素的class改为classname
    obj.id = ‘idname’:将obj元素的id改为idname
    obj.getAttribute(‘name’):获得obj元素的name属性值
    obj.attributes:获得obj元素的所有属性,返回结果是包含name/id/class三个属性及其值的对象

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>直接修改id和class属性</title>
        <style>
            #frm{
                border:2px solid #00f;
                width: 200px;
                height: 20px;
            }
            .frm{
                background-color: #c0f2f8;
            }
        </style>
    </head>
    <body>
        <div name="obj">添加删除样式单</div>
        <button onclick="addStyle(this)">添加样式单</button>
        <button onclick="deleteStyle(this)">删除样式单</button>
        <div name="obj">添加删除样式单</div>
        <script>
            function addStyle(obj){
                var fa_node = obj.parentNode;
                for(var i=0;i<fa_node.childNodes.length;i++){
                    if(fa_node.childNodes[i].attributes != null){
                        if(fa_node.childNodes[i].getAttribute('name') == 'obj'){
                            fa_node.childNodes[i].id = 'frm';
                            fa_node.childNodes[i].className = 'frm';
                        }
                    }
                }
            }
            function deleteStyle(obj){
                var fa_node = obj.parentNode;
                for(var i=0;i<fa_node.childNodes.length;i++){
                    if(fa_node.childNodes[i].attributes != null){
                        if(fa_node.childNodes[i].getAttribute('name') == 'obj'){
                            fa_node.childNodes[i].id = '';
                            fa_node.childNodes[i].className = '';
                        }
                    }
                }
            }
        </script>
    </body>
    </html>
    展开全文
  • javascript、jQuery动态修改css属性

    千次阅读 2019-04-06 15:43:05
    *javascript动态修改css效果的方法(四种) * 第一种:使用obj.className来修改样式表的类名。例如:div1.style.width="100px"; * 第二种:使用obj.style.cssText来修改嵌入式的css。例:div1.style.cssText=...

    /*  javascript方法

    *javascript动态修改css效果的方法(四种)

    * 第一种:使用obj.className来修改样式表的类名。例如:div1.style.width="100px";

    * 第二种:使用obj.style.cssText来修改嵌入式的css。例:div1.style.cssText="width:100px;height:100px;background: palevioletred;";

    * 第三种:使用obj.className来修改样式表的类名。例如:div1.setAttribute("class","div2")

    * 第四种:使用更改外联的css文件,从而改变元素的css。 例如:div1.setAttribute("href","css2.css");

    */

    html代码:

    <link href="css/css1.css" rel="stylesheet" id="cssLink" />
    <div id="divBtn1" οnclick="changeCss1()">1</div>
    <div id="divBtn2" οnclick="changeCss2()">2</div>
    <div id="divBtn3" οnclick="changeCss3()">3</div>
    <div id="divBtn4" οnclick="changeCss4()">4</div>

    css1.css文件

    复制代码

    @charset "utf-8";
    #divBtn1,#divBtn2,#divBtn3,#divBtn4{
        width:100px;
        height:100px;
        margin-bottom: 10px;
    }
    #divBtn1{background:yellowgreen;}
    #divBtn2{background:paleturquoise;}
    #divBtn3{border:1px solid #ccc}
    #divBtn4{background:blue;}
    .div3{width:100px;height:100px;background:blueviolet}

    复制代码

    css2.css文件

    复制代码

    @charset "utf-8";
    #divBtn4{background: greenyellow;}
    #divBtn1,#divBtn2,#divBtn3,#divBtn4{
        width:200px;
        height:200px;
        border:1px solid #ccc;
        margin-bottom: 10px;
    }
    #divBtn1{background:yellowgreen;}
    #divBtn2{background:paleturquoise;}
    .div3{width:100px;height:100px;background:blueviolet}

    复制代码

    js代码:

    复制代码

    <script>
                /*
                 *javascript动态修改css效果的方法(四种) 
                 * 第一种:div1.style.width="100px";
                 * 第二种:div2.style.cssText="width:100px;height:100px;background: palevioletred;";
                 * 第三种:div1.setAttribute("class","div2")和div3.className="div3";//效果一样
                 * 第四种:使用更改外联的css文件,从而改变元素的css
                 * obj.setAttribute("href","css/css2.css");
                 * */
                function changeCss1(){
                    var div1=document.getElementById("divBtn1");
                    div1.style.width="100px";
                    div1.style.height="100px";
                    div1.style.background="red";
                }
                function changeCss2(){
                    var div2=document.getElementById("divBtn2");
                    div2.style.cssText="width:100px;height:100px;background: palevioletred;";
                    //cssText会覆盖之前的设置  无兼容性问题  写法和css样式表相同
                }
                function changeCss3(){
                    var div3=document.getElementById("divBtn3");
                    //div3.className="div3";//效果一样
                    div3.setAttribute("class","div3");
                }
                function changeCss4(){
                    var obj=document.getElementById("cssLink");
                    obj.setAttribute("href","css/css2.css");
                }
            </script>

    复制代码

    jQuery方法:

    css部分:

    复制代码

    .div1{
          width:100px;
          height:100px;
          background:#00ff00;
          }
    .div2{
           width:100px;
           height:100px;
           background:#ff0000;
          }
    #Btndiv{
             width:100px;
             height:100px;
             border: 1px solid #ccc;
             margin-bottom: 10px;
             }        

    复制代码

    jQuery代码:

    复制代码

           <div id="Btndiv" οnclick="changeCss()"></div>
            <script>
                $(document).ready(function (){
                    //第一种
    //                $("div").css("width","100px");
    //                $("div").css("height","100px");
    //                $("div").css("background","cyan");
                    //第二种
    //                $("div").css({
    //                    width:"100px",height:"100px",background:"red"
    //                });
                    //第三种
                    $("div").addClass("div1");
                    $("div").click(function (){
    //                    $(this).addClass("div2");
    //                  $(this).removeClass("div1");
                        $(this).toggleClass("div2");
                    });
                });
        </script>

    复制代码

    展开全文
  • 用JavaScript修改CSS属性 只有写原生的javascript了。 1.用JS修改标签的 class 属性值: class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也...
  • 【jQuery】jQuery修改class属性CSS样式

    千次阅读 2016-06-15 19:21:22
    jQuery修改class属性CSS样式 class属性修改  类属性即class属性,规定类名.  用类选择器规定样式的时候,需要为元素指定类名,即class属性的值.  注意每个HTML元素只有一个class属性.但是class属性的...

    jQuery修改class属性和CSS样式

    class属性修改

      类属性即class属性,规定类名.
      用类选择器规定样式的时候,需要为元素指定类名,即class属性的值.
      注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔.
     
      用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass()removeClass(),toggleClass()等方法来完成.
     
    addClass()
      addClass()方法向匹配的元素增加指定的类名(一个或多个).
      注意对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性. 
      用attr()方法设置class属性,是一个覆盖的过程;而addClass()则是一个追加的过程.
      class之间最终是用空格来隔开的.
      如果需要添加多个类,用空格分隔类名.
      从1.4开始,这个方法的参数也可以传入一个function.
     
    removeClass()
      removeClass()方法从被选元素移除一个或多个类.如需移除若干类,用空格来分隔类名.
      如果没有传参数,该方法将会移除被选元素的所有类.
     
     
    toggleClass()
      toggleClass()方法对被选元素的一个或多个类进行切换(设置或移除).
      该方法检查每个元素中的指定类,如果存在则删除,如果不存在则添加.
      通过添加参数,可以设置只进行删除或者只进行添加操作.
      格式:$(selector).toggleClass(class,switch)
      switch值为true时,只添加;为false时,只删除.
     
     
    hasClass()
      hasClass()方法检查被选元素是否包含指定的class.
      还可以用is()方法实现同样的功能,方法参数传入一个选择器字符串,比如”.className”.
     

    CSS样式修改

      jQuery中还有一些方法直接返回或者设置元素的CSS属性.
    css()
      读操作: 获取匹配元素集合中第一个元素的指定样式值(一个或多个).
      注:读取多个样式值的操作是在jQuery v1.9才加入的.
      写操作: 为匹配元素集合中的每一个元素设置一个或多个CSS属性的值.
      传入的参数可以是单个的键值对,也可以是PlainObject指定的多个值,还可以是function.(v1.4).
     
      jQuery会处理各个浏览器中不太相同的一些具体情况,比如W3C的cssFloat在IE中是styleFloat,在jQuery中,你可以使用float,然后jQuery会帮你把它翻译成每个浏览器中应该有的正确名称.
      还有,jQuery会合理解读CSS和DOM格式的多词属性,比如.css(“background-color”)和.css(“backgroundColor”),它都是可以处理的.
     
     
    height()和width()
      高度和宽度属性.这个宽高值不包括padding,border和margin.除非box-sizing属性被使用了.
      注意写操作的时候set的是content的宽高,不包括box-sizing的部分.
     
      读操作仍然是返回集合第一个元素的属性值.
      .css(“width”).width()的区别是:前者返回带单位的值,比如400px;后者返回不带单位的像素数值,即400.
      所以如果值需要被用于某种计算,.height().width()是被推荐使用的.
      读取得到的数值不一定是整型,并且如果用户缩放了页面,其值可能是不正确的,因为浏览器没有暴露这种情况的API.
      还有一种不准确的情况,当这个元素的父元素隐藏起来时,该元素的尺寸可能读不准.
     
      写操作支持的value类型是字符串或者数字.
      如果是数字,jQuery默认是px为单位.
      如果是字符串,除了可以数字加单位之外,任何合理的CSS measurement都可以用,比如100%,50%,或者auto.
     
    position()
      返回第一个匹配元素相对于父元素(offset parent)的位置.
      只有读操作.
     
    offset()
      返回第一个匹配元素的坐标,或者设定每一个匹配元素的坐标,这个坐标是相对于document的.
     
     
    offsetParent()
      返回父类,只有读操作.
     
    scrollLeft()和scrollTop()
     
     
     

    参考资料

      圣思园张龙老师JavaWeb视频教程75
      jQuery API: http://api.jquery.com/
      w3school 参考手册:
    展开全文
  • <div class=hello xss=removed> <h5>{{ msg }} [removed] export default { data() { return { msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • jQuery修改操作css属性实现方法

    千次阅读 2016-01-27 15:54:32
    [导读] 在jquery中我们要动态修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍。css()方法在使用上具有多样性,我们先来了解css()方法基本知识。css() 方法设置或返回被选元素的一...

    转载自:http://www.php100.com/html/program/jquery/2013/0905/6018.html

    [导读] 在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍。css()方法在使用上具有多样性,我们先来了解css()方法基本知识。css() 方法设置或返回被选元素的一个

    在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍。

    css()方法在使用上具有多样性,我们先来了解css()方法基本知识。

    css() 方法设置或返回被选元素的一个或多个样式属性。

    返回 CSS 属性
    如需返回指定的 CSS 属性的值,请使用如下语法:

    css("propertyname");下面的例子将返回首个匹配元素的 background-color 值:

    实例

    $("p").css("background-color");

    设置 CSS 属性

    如需设置指定的 CSS 属性,请使用如下语法:

    css("propertyname","value");下面的例子将为所有匹配元素设置 background-color 值:

    实例

    $("p").css("background-color","yellow");

    设置多个 CSS 属性

    如需设置多个 CSS 属性,请使用如下语法:

    css({"propertyname":"value","propertyname":"value",...});下面的例子将为所有匹配元素设置 background-color 和 font-size:

    实例

    $("p").css({"background-color":"yellow","font-size":"200%"});


    如我们要改变链接颜色,我们可以使用下面的代码:

    $("#61dh a").css('color','#123456');

    //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
    //.css(‘color’,'#123456');表示把颜色设为'#123456'如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:

    var divcss = {
      background: '#EEE',
          width: '478px',
          margin: '10px 0 0',
          padding: '5px 10px',
          border: '1px solid #CCC'
    };
    $("#result").css(divcss);

    //这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。
    //然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:

    $("#61dh a").css("color")

    //和第一个例子相似,但是这里我们只传递一个参数(样式属性)最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

    $("#61dh a").css('color','#123456');
      $("#61dh a").hover(function(){
      $(this).css('color','#999');
      },
      function(){
      $(this).css('color','#123456');
    });

    //hover()方法的两个函数使用用逗号分隔你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。


    还有一些常用的如addclass,hasclass我们也来看看

    下表是修改CSS类相关的jQuery方法:

    名称
    说明
    实例
    addClass( classes )
    为每个匹配的元素添加指定的类名。
    为匹配的元素加上 ' selected' 类: 
    $("p").addClass("selected");
    hasClass( class )
    判断包装集中是否至少有一个元素应用了指定的CSS类

    $("p").hasClass("selected");
    removeClass( [classes] )
    从所有匹配的元素中删除全部或者指定的类。
    从匹配的元素中删除 'selected' 类: 
    $("p").removeClass("selected");
    toggleClass( class )
    如果存在(不存在)就删除(添加)一个类。
    为匹配的元素切换 'selected' 类: 
    $("p").toggleClass("selected");
    toggleClass( class, switch )
    当switch是true时添加类, 
    当switch是false时删除类
    每三次点击切换高亮样式: 
    var count = 0; 
    $("p").click(function(){ 
      $(this).toggleClass("highlight", count++ % 3 == 0); 
    });

     
    使用上面的方法, 我们可以将元素的CSS类像集合一样修改, 再也不必手工解析字符串.注意  addClass( class ) removeClass( [classes] ) 的参数可以一次传入多个css类, 用空格分割,比如:
    $(“#btnAdd”).bind(“click”,
          Function(event){
    $(“p”).addClass(“colorRed borderBlue”);
    }
    );

    removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:
    $(“p”).removeClass(); 
    2. 修改CSS样式
    同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性"style"时,  jQuery也提供了相应的方法:

    名称
    说明
    实例
    css( name )
    访问第一个匹配元素的样式属性。
    取得第一个段落的color样式属性的值:
    $("p").css("color");
    css( properties )
    把一个“名/值对”对象设置为所有匹配元素的样式属性。
    这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
    将所有段落的字体颜色设为红色并且背景为蓝色: 
    $("p").css({ color: "#ff0011", background: "blue" });
    css( name, value )
    在所有匹配的元素中,设置一个样式属性的值。
    数字将自动转化为像素值
    将所有段落字体设为红色:
    $("p").css("color","red");


    展开全文
  • js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点。getStyle(obj,attr) 调用方法说明:obj为对像,attr为属性名必须兼容js中的写法(可以参考:JS可以控制样式的名称
  • 用JavaScript修改CSS属性

    千次阅读 2013-12-10 09:59:13
    利用JavaScript可以修改HTML标签所设置的CSS属性,这样就可以改变标签的样式。 用JavaScript修改标签的样式主要有两种做法:一是用另一个CSS样式表代替标签现在CSS样式表,二是直接修改标签的CSS样式表中的属性。 ...
  • 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属性
  • 直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进行切换,是最简单可行的一种方式。也是目前使用最多的方法。此方法会覆盖对象原有的class属性 var obj = document.getElementById("div"); obj....
  • JavaScript修改CSS属性函数

    千次阅读 2008-04-10 08:42:00
    如果需要根据页面大小来调整某个HTML标签的CSS的属性,比如高或者宽什么的,如果使用ID来控制也可以,戒烟如你觉得有点复杂了,从网上找了一个修改CSS属性的函数。JavaScript代码 function changecss(theClass,...
  • jQuery修改class属性

    万次阅读 2018-08-25 10:37:32
    注意:对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性. 2.removeClass(); 移除样式 3.hasClass() 包含某个样式 4.$(“#xxx”).attr(“class...
  • 原生JS修改CSS属性

    万次阅读 2019-08-06 18:15:23
    1. 修改style样式 2. 修改特定元素节点的style内容 3. 通过setAttribute 修改style
  • vue中修改css属性无效

    千次阅读 2019-10-30 18:03:57
    vue中修改css属性无效,img设置的宽度无效,p设置的颜色有效 <template> <div> <carousel></carousel> <p> 555555</p> </div> </template>...
  • JS修改class属性

    万次阅读 2019-05-13 00:43:11
    DOM里的每个节点上都有一个classList对象,既可以用里面的方法新增、删除、修改节点上的CSS类。也可以用它来判断某个节点是否被赋予了某个CSS类。 add(类名) 添加类名 remove(类名) 删除类名 replace(替换谁,替换...
  • vue中动态修改css其中一个属性

    万次阅读 2019-01-04 17:03:28
    &...div class="hello" :style="{'height':getClientHeight}"&gt; &lt;h5&gt;{{ msg }}&lt;/h5&gt; &lt;/div&gt; &lt;/template&gt
  • 使用javascript更改某个css class属性

    千次阅读 2008-06-28 16:47:00
    使用javascript更改某个css class属性问题: 你想要修改某个css class属性。如:.orig { display: none;}你想要改变把他的display属性由none改为inline。解决办法: 在IE里:document.styleSheets[0].rules[0]....
  • vue中动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    问题描述: 一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变...toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入 <div v-show="toast" class...
  • 在div中 使用 :style="{'属性':值}" 的格式进行动态设置css属性 <template> <div class="courseitem"> <div class="color" :style="{'background':examClolr ,'box-shadow': examShadow }">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 143,596
精华内容 57,438
关键字:

动态修改class的css属性