通过脚本定义样式

Question

我有一个HTML代码，我想使用动态变量定义样式。基本上，我想根据用户来自的URL更改按钮的颜色。

使用 jscript 更改 ID="wtv" 的颜色

像这样：

<script>
document.getElementById("link1").style.color = "blue";
</script>

link1 是<> 标记的 ID

样式项如下：

.megamenu-nav li a link1{
color:#EAAB00
}

我想使用动态变量在脚本中定义颜色。

Answer 1

可能有点不对劲，但你可以直接使用 js 更改样式。 下面的示例使用按钮，但您可以在页面加载时轻松实现它。

<script>
document.getElementById('button').addEventListener('click', function() {
var url = document.referrer; // Grabs the previous URL
var hex = getHexCode(url); // Function where you decide what hex value you want to use.
document.getElementById('p2').style["background-color"] = hex; // change style of the element.
})
function getHexCode(url) {
var hex;
if (url.length > 30) {
hex = '#3333ff';
} else {
hex = '#ff0000';
}
return hex;
}
</script>

这里它是在JSFiddle中实现的， https://jsfiddle.net/7x7u79tr/1/

Answer 2

以下是用于更改button颜色的 JQuery 代码：

$(document).ready(function() {
var buttonColor = '#EAAB00';
$("#link1").css({
'color': buttonColor
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='link1'>Some link</button>