gpt4 book ai didi

javascript - 如何通过javascript动态更改css

转载 作者:行者123 更新时间:2023-11-30 08:50:05 25 4
gpt4 key购买 nike

我在标题为空时有一个样式

<style> 
.cls{

}
</style>

我想通过点击示例将其动态更改为

<style> 
.cls{
font-size: 15px;
font-family : Arial, Verdana;
border: 1px solid blue;
background-color: yellow;
}
</style>

这是我的代码 http://jsfiddle.net/nyf7T/

<script>
function changeCSS () {
var style = 'font-size: 15px;'
+ 'font-family : Arial, Verdana;'
+ 'border: 1px solid blue ;'
+ 'background-color: yellow;';
alert(style);
}

</script>
<style>
.cls{

}
</style>
<div>
<table style="margin:5px;">
<tr>
<td class="cls">
abcd
</td>
</tr>
</table>
</div>

<a href="#" onclick="changeCSS();">Setstyle</a>

如何做到这一点谢谢。

最佳答案

您要求的是更改 CSS 类的规则。

您需要使用 CSSStyleSheet.insertRule 方法来执行此操作。更多信息 here

你可能还需要看看这些

document.styleSheets 用于获取页面中使用的样式表。

styleSheet.cssRules 用于获取特定样式表中的 cssRules。

rule.selectorText 属性 -> 检查 here

在你的情况下,你需要尝试这样的事情(或更精致的版本)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.cls {
}
</style>
</head>

<body>
<div>
<table style="margin:5px;">
<tr>
<td class="cls"> abcd </td>
</tr>
</table>
</div>
<a href="#" onClick="changeCSS();">Setstyle</a>
<script>
function changeCSS () {
var myStyleSheet = document.styleSheets[0];

var style = '.cls { font-size: 15px;'
+ 'font-family : Arial, Verdana;'
+ 'border: 1px solid blue;'
+ 'background-color: yellow; }';

myStyleSheet.insertRule(style, 0);
}

</script>
</body>
</html>

在这里检查工作版本http://jsfiddle.net/dK65G/1/

关于javascript - 如何通过javascript动态更改css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18654263/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com