通过脚本定义样式答案

【问题标题】：Defining a style via script通过脚本定义样式
【发布时间】：2017-12-24 01:42:05
【问题描述】：

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

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

类似这样的：

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

link1是标签的ID

样式项如下：

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

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

【问题讨论】：

你是想通过 CSS 还是 Javascript 来做到这一点？
你已经尝试了什么？
我试过了：
这不行吗？

标签： javascript jquery html css styles

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：