js向id添加css属性值

Posted 2023-03-30

<script type="text/javascript" >
var x=[cascadelist:score];
var y=10;
var z=x*y;
var s=(z + ".0%");
// alert(s);
document.getElementById("pingfen").style.width=s;
</script>
<divclass="info_star"><span id="pingfen" class="info_star2" style=" "></span></div>

==============================================================================
怎么把s变量值传到style="width: " 中呢？试了好久都不行。是不是哪里写错了？求高手解答哦！
[cascadelist:score] 是一个模板的标签来的，输出的值是浮点型的，比如1.1 ，2.2 ，3.3

1、jquery：

$("#id").css("background","＃000");

$("//*这个是你的id，前面要用＃，如果class就是.(点)，和写css获取一样的*//").css("//*这个是css属性color，或者background，font-size等*//","//*这个是属性值*//"); 

2、js:

document.getElementById("id").style.color="#000";

document.getElementById("//*这个是你的id,不要＃，只能是id不能是class*//").style.//*css属性*//="//*属性值*//";

建议用jquery

参考技术A jquery：
$("#id").css("background","＃000");
$("//*这个是你的id，前面要用＃，如果class就是.(点)，和写css获取一样的*//").css("//*这个是css属性color，或者background，font-size等*//","//*这个是属性值*//");

js:
document.getElementById("id").style.color="#000";
document.getElementById("//*这个是你的id,不要＃，只能是id不能是class*//").style.//*css属性*//="//*属性值*//";

建议用jquery。
$("#pingfen").css("witdh",s);
你的那个问题试试下面的。注意span标签要形成块元素，不然没有宽度的，span不是块元素。
$("#pingfen").css("witdh",s).css("display","block");

参考技术B  <divclass="info_star">
    <span id="pingfen" class="info_star2" style=" "></span>
 </div>
 <script type="text/javascript" >
            var x=[cascadelist:score];
            var y=10;
            var z=x*y;
            var s=(z + ".0%");
            // alert(s);
            document.getElementById("pingfen").style.width=s;
            </script>

这样试试。估计可以成功

追问

这样也不行啊，得出的结果是这样的。

追答

那你看看你的z是不是0

追问

z 变量 alert(z) 弹出的是一个整数， 非空值。这个没问题。就是传递过去的css值就不对了，不知道什么原因！
alert(s) 弹出的值也是正确的，非空值。就是传递过去就不行了

是不是数据类型有什么问题啊 ？？如果我把改成 document.getElementById("pingfen").style.width=“90%”;
这个就正常传递过去了，但是那个css属性值不是固定的，

参考技术C

jquery语法

$("#id").css("width","360px");

原生语法

var id = document.getElementById("id");
id.style.background = red;

js添加css属性导致:hover无效的解决办法

这其实是css的优先级导致的。

js添加的属性是直接在标签增加style属性，优先级高于样式表的#和.选择器。style>id>class。

但是:hover伪类也失效了。说明style>css伪类>id>class。

给:hover的属性后面添加!important就可以了。

color: #fff !important;

设置了!important的样式优先级高于一切。

!important>style>id>class