精华内容
下载资源
问答
  • 修改class的属性值 // javascript方式 function setSpecificStyleSheetCssClassProperty(pStyleSheet, pSelectorText, pProperty, pValue) {   var rules = pStyleSheet.cssRules;   var rule;   var ...
    function setStyleSheetObjCssClassProperty(pStyleSheetObj, pSelectorText, pProperty, pValue) {
      var pStyleSheet = pStyleSheetObj.sheet;
      setSpecificStyleSheetCssClassProperty(pStyleSheet, pSelectorText, pProperty, pValue);
    }
    //修改class的属性值
    //javascript方式
    function setSpecificStyleSheetCssClassProperty(pStyleSheet, pSelectorText, pProperty, pValue) {
      var rules = pStyleSheet.cssRules;
      var rule;
      var selectorText;
      for (i = 0; i < rules.length; i++) {
        rule = rules[i];
        selectorText = rule.selectorText;
        if (selectorText == null || selectorText == "") {
            continue;
        }
        else if (selectorText === pSelectorText) {
            rule.style.setProperty(pProperty, pValue);
            return;
        }
    //else if (selectorText.indexOf(pSelectorText + ",") > 0) {
    // rule.style.setProperty(pProperty, pValue);
    //}
      }
    }
    //修改class的属性值
    //javascript方式
    function setCssClassProperty(pSelectorText, pProperty, pValue) {
      var pSheetObjs = document.styleSheets;
      for (j = 0; j < pSheetObjs.length; j++) {
          setSpecificStyleSheetCssClassProperty(pSheetObjs[j], pSelectorText, pProperty, pValue);
    }
    
    
    
    使用例子如下:
    
        var sheetObj=$("#linkSource")[0];
        setStyleSheetObjCssClassProperty(sheetObj,"pSelectorText","background","green");
        setCssClassProperty("pSelectorText","background","green");
    
     修改后的效果的生命期:从修改开始直到CSS文件重新加载, 所以,如果有其他的特殊的使用的情况,相应的重新执行一次就好了。
     
    //删除stylesheet中的某一个rule
    function deleteRule(sheet, ruleName) {
      for (i = 0; i < sheet.rules.length; i++) {
        var rule = sheet.rules[i];
        if (rule.selectorText.toLowerCase() == ruleName.toLowerCase()) {
    
          if (sheet.deleteRule) {
              sheet.deleteRule(i);
          }
          if (sheet.removeRule) {
              sheet.removeRule(i);
          }
        }
      }
    }
    //stylesheet中的添加一个rule
    function addRule(sheet, ruleName) {
      if (sheet.addRule) {
        sheet.addRule(ruleName, null, 0);
      }
      if (sheet.insertRule) {
        sheet.insertRule(ruleName + ' { }', 0);
      }
    }
    
    
     

     

    转载于:https://www.cnblogs.com/jearay/p/4961991.html

    展开全文
  • <div class=hello xss=removed> <h5>{{ msg }} [removed] export default { data() { return { msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • 因此,进行DOM编程时应该避免修改id属性,如果需要动态改变匹配的CSS规则,就改变class属性吧。我碰到这个问题时也就是尝试通过修改id属性修改唯一匹配某个CSS过滤器的元素,结果发现修改后在IE中完全没有修改,...
  • 现在你想在某个元素click事件中动态的把techbrood:beforewidth属性设置为100%, 有两个方法,一个是添加新样式: $('head').append(<style>.techbrood::before{ width:100% }</s
  • 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
    <template>
    <!--此div的高度取屏幕可视区域的高度-->
      <div class="hello" :style="{'height':getClientHeight}">
        <h5>{{ msg }}</h5>
    
    
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: "Welcome to Your Vue.js App",
        };
      },
      computed: {
        getClientHeight:function () {
        //屏幕可视区域的高度
          let clientHeight = document.documentElement.clientHeight + "px"
          console.log("clientHeight 1=="+clientHeight)
          //窗口可视区域发生变化的时候执行
          window.onresize = () => {
            clientHeight = document.documentElement.clientHeight + "px"
            console.log("clientHeight changed2=="+clientHeight)
            return clientHeight
          }
          console.log("clientHeight 3=="+clientHeight)
          return clientHeight
        }
      }
    };
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .hello{
      width: 100%;
      background-color: #42b983;
    }
    
    </style>
    
    
    展开全文
  • 直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进行切换,是最简单可行一种方式。也是目前使用最多方法。此方法会覆盖对象原有的class属性 var obj = document.getElementById("div"); obj....

    修改标签的class属性值

    直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进行切换,是最简单可行的一种方式。也是目前使用最多的方法。此方法会覆盖对象原有的class属性

    <script type="text/javascript"> var obj = document.getElementById("div"); obj.className = "otherclass"; </script>

    非标准ECMAScript来进行修改其class的值。

    还有就是使用ES标准来进行修改,就是使用DOM的setAttribute方法。但是他有一个兼容性问题。

        <script type="text/javascript">
          var obj = document.getElementById("div");
          obj.setAttribute("className","otherclass");//IE下使用className
          obj.setAttribute("class","otherclass");//FF下的方式 所以要注意
        </script>
    

    setAttribute()对id同样适用。

    ##添加行内样式 直接使用 dom_obj.style.*** = "***"; 来进行对其样式的覆盖。由于行内样式优先级最高,所以能覆盖其他节点的样式。 该方法也是极为常用的,唯一需要注意的就是对于样式名的大小写问题。如:border-left 应该为 borderLeft 。

    使用该方法我们可能需要用到计算当前样式值的方法。这里也具有兼容性问题。currentStyle只有IE支持。取得当前应用的样getComputedStyle支持FF,Opera,Safari,Chrome等浏览器。取得最终应用的样式。

    <script type="text/javascript">
    
        var obj = document.getElementById("div");
    
        objh=document.defaultView.getComputedStyle(obj,null).height;
    
        //或者
        objh=window.getComputedStyle(obj,null)[height];
    
        //IE下 需要
        objh=obj.currentStyle[height];
    
    </script>
    

    解决兼容性的方法

    function getStyle(element,property) {
    
          var value = element.style[camelize(property)];
    
          if(!value) {
    
            if(document.defaultView && document.defaultView.getComputedStyle) {
    
              value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
    
            } else if(element.currentStyle) {
    
              value = element.currentStyle[camelize(property)];
    
             }
    
          } 
      
          return value;
        }
    
    展开全文
  • 关于JS修改标签的class属性

    万次阅读 2009-08-06 21:52:00
    近日,项目中,要用到动态的修改td的class属性.由于对JS不熟悉,调试了N久:document.getElementById("td").class = "css_sty";document.getElementById("td").setAttribute("calss","css_sty");试了以上两种方法都...

    近日,项目中,要用到动态的去修改td的class属性.
    由于对JS不熟悉,调试了N久:
    document.getElementById("td").class = "css_sty";
    document.getElementById("td").setAttribute("calss","css_sty");
    试了以上两种方法都不行.
    于是在网上拼命搜索,终于找到问题所在:

    由于class属于JavaScript保留值,因此当我们要操作元素的class属性值时,直接使用obj.getAttribute('class')和obj.setAttribute('class', 'value')可能会遭遇浏览器兼容性问题。

    W3C DOM标准为每个节点提供了一个可读写的className属性,作为节点class属性的映射,标准浏览器的都提供了这一属性的支持,因此,可以使用e.className访问元素的class属性值,也可对该属性进行重新斌值。而IE和Opera中也可使用e.getAttribute('className')和e.setAttribute('className', 'value')访问及修改class属性值。相比之下,e.className是W3C DOM标准,仍然是兼容性最强的解决办法。

    以下列表说明了上文提及的三种做法的浏览器兼容性测试:

    e.className 能在IE、Mozilla(Firefox)、Opera和Safari正确运行
    e.getAttribute('class')和e.setAttribute('class', 'value') 能在Mozilla(Firefox)和Opera中正确运行,在IE和Safari中则不能使用。
    e.getAttribute('className') 在IE和Opera中正确运行,在Mozilla(Firefox)和Safari中则不能使用。

    展开全文
  • 关于使用JS动态修改CSS样式问题

    千次阅读 2016-03-01 16:03:06
    【转】关于使用js动态修改样式问题  有时我们需要动态生成效果,那么就需要对页面的css进行各种处理,进而达到一些样式的改变。如动画,拖放等效果。所以使用JS正确的来对页面样式修改是灰常...
  • 动态查找到这个类并修改里面的属性. 我找到操作方法是使用domstyleSheets集合。 先在页面加上 然后调用document.styleSheets[0]得到这个css文件引用,再根据一些子属性可以定位到这个 .class1{} ...
  • 在script里面,修改css的属性,有两种方法: 1. 动态的设置class类名 <div :class="color"></div> method: { setColor() { this.color = colorRed; } } <style> colorRed { color:...
  • 其实就是改变了便签的class修改css属性设置position: fixed;fixed属性可以让便签固定在浏览器某一位置(记得引用jquery框架) css: 1 .css1{ 2 height:200px; 3 width:200px; 4 background-color: #...
  • 修改样式有通过修改class属性来更改,也可以通过动态引入外部的css文件来改变对应的样式展示。 这里就介绍动态引入、移除css文件 ///添加平板样式文件 function loadStyles() { var link = document....
  • 通过CSS选择器来进行大规模选取,但通常会用到ID属性class属性来指定范围。通过ID和class属性来设置样式。直接定义内联样式,直接作用于当前标签。当然,有些标签提供了样式属性,但不推荐使用。结构与表现应该...
  • 想要实现一个点击切换文字颜色功能 , 但在v-for渲染数据后通过判断 数据索引更改类名发现 用于判断定义变量内容变化了 但元素class属性却没变化 , 苦思冥想选择换个思路直接上解决代码css代码.active {color: ...
  • Jquery中操作元素属性 css 属性

    千次阅读 2011-04-10 16:01:00
    动态修改img标签src属性,使用each <p><img class="google" src=... <p><img class="google"src="http://www.google.c
  • 用jquery修改CSS的问题

    2016-03-28 03:04:15
    现在我需要用jquey动态修改例如path[data-classbreak="classbreak0"]中fill属性,尝试 $("path[data-classbreak='classbreak0]").css("fill","#33FF00")并没有效果,请问应该怎么改?谢谢!
  • CSS 非常灵活,可通过 class 和 style 给元素动态绑定 CSS,今天内容详细介绍使用规则:在未使用 Vue 框架时,可以通过 class 和 style 来给 HTML 元素添加 css,如果想动态修改 css 可直接操作 DOM 元素的属性。...
  • 关于用jquery 修改CSS

    2016-03-27 13:24:52
    现在需要在一个回调函数中用jquery动态修改特定类别的属性值,但是不知道如何选中该类别,比如如何修改 path[data-classbreak="classbreak3"]中fill属性? 另外,这个CSS复制于其它地方,求问 path...
  • 最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改。...不能直接通过 js 修改属性,虽然可以通过 切换 dom 元素的css 样式名进行修改,但是这样就比较复杂了。 ...
  • input标签存在一个disabled属性,可以用来禁用此标签,通常还可以对这个属性进行禁用后样式修改 <input [disabled]="boolean"> //一般里面对应一个bool属性,表示是否禁用标签,而样式修改可以在css中自己...
  • 在Visual Studio .NET 环境下开发BS系统,可以通过设置WEB 控件的CssClass属性,方便地设置和修改控件的样式。但在实际开发过程中,让开发人员一个个地设置控件的CssClass属性,不仅繁琐,而且容易出错,更头疼的是...
  • 要点:动态修改@keyframes中的属性 代码(只展示关键代码): HTML &amp;amp;amp;lt;div class=&amp;amp;quot;item&amp;amp;quot; v-for=&amp;amp;quot;(item,index) in items&amp;amp;quot;...
  • css入门笔记

    2018-05-15 14:58:57
    大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范...
  • 动态修改style 1.易错:修改元素样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用”style.属性名”.注意在css属性名在javascript中 操作时候属性名可能不一样,主要集中在那些属性名...
  • 3事件监听更改style中position属性 ** 修改样式 滚动监听事件中使用this.$refs.xxx.style.color=‘xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所以通过动态绑定来解决...
  • ========================================== 通过动态设置页面所有同类型控件的样式来该变界面: 方法二: 可以通过改变WEB控件的CssClass属性,可方便地设置和修改控件的样式。 但在实际开发过程中,一个个地设置控件...

空空如也

空空如也

1 2 3 4 5 6
收藏数 107
精华内容 42
关键字:

动态修改class的css属性