Javascript 使用变量用JS更改CSS_Javascript_Css_Variables_Border

Javascript 使用变量用JS更改CSS

javascript css variables

Javascript 使用变量用JS更改CSS,javascript,css,variables,border,Javascript,Css,Variables,Border,我用一个简单的脚本制作了一个简单的HTML文件我想用人们自己填写的值来更改CSS边框。它与厚度、风格、颜色有关。另外，我设置了3个div来测试它，它应该只分配给1个div。当用户填写所需的值时，他们应按GO键，然后执行脚本这是我的HTML <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1</title> <lin

我用一个简单的脚本制作了一个简单的HTML文件

我想用人们自己填写的值来更改CSS边框。它与厚度、风格、颜色有关。另外，我设置了3个div来测试它，它应该只分配给1个div。当用户填写所需的值时，他们应按GO键，然后执行脚本

这是我的HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>

<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
  <tr>
    <td width="318">Border thickness (thin, medium, thick)</td>
    <td width="419"><textarea id="BD">thin</textarea></td>
  </tr>
  <tr>
    <td>Border style (dashed, dotted, solid or double)</td>
    <td><textarea id="BS">dashed</textarea></td>
  </tr>
  <tr>
    <td>Border color (i.e. #000 or #FFF</td>
    <td><textarea id="BK">#0f0</textarea></td>
  </tr>
  <tr>
    <td>Which Div? ( one two or three?)</td>
    <td><textarea id="DN">two</textarea></td>
  </tr>
  <tr>
    <td align="center"></td>
    <td>&nbsp;<button>Go</button></td>
  </tr>

</table>

这是我的CSS

#one{
    height:100px;
    width:100px;
    background-color:#CCCCCC;
    border:none;
    margin:10px;
    float:left;
}
#two {
    height:100px;
    width:100px;
    background-color:#CCCCCC;
    margin:10px;
    float:left;
    border:none;
}
#three {
    height:100px;
    width:100px;
    background-color:#CCCCCC;
    margin:10px;
    float:left;
    border:none;
}

快速回顾

如果人们填写厚度、颜色和样式的值（虚线）。脚本将它们转换为变量，这些变量应在单击按钮（go）后在CSS中设置，如下所示：

border: thick dashed #0F0;

（随机顺序），并且仅适用于用户选择的DIV

编辑：用于添加问题或问题

我使用的脚本不起作用。我不知道为什么。我整天都在忙

我想你在找这样的东西

向button元素添加一个id，这就是javascript

var button = document.getElementById('button');

button.addEventListener('click', function () {
    var thickness = document.getElementById("BD").value
    var color = document.getElementById("BK").value
    var style = document.getElementById("BS").value
    var div = document.getElementById("DN").value
    var alltogether = thickness + ' ' + style + ' ' + color;
    //alert(alltogether);
    document.getElementById(div).style.border = alltogether;

}, false);

以下是我在阅读了多篇其他帖子后想到的一点东西

var getCssVar = function($var){
  return window.getComputedStyle(document.body).getPropertyValue(`${$var}`);
};

var setCssVar = function($var, $value) {
  return document.querySelector("html").style.setProperty($var, $value);
};

…你的问题是…？？@Diodeus添加了我的问题。。。错过那部分可不是明智之举。请加一把js提琴，这样会更容易理解debug@JamesDaly嗨，詹姆斯，谢谢你的帮助。在JSFIDLE上，它可以工作，但当我将它复制到dreamweaver中并（在chrome中）测试它时，它什么也做不了……你把javascript放在哪里了？将javascript放在页面底部或窗口中。onload=function（）{}；

var getCssVar = function($var){
  return window.getComputedStyle(document.body).getPropertyValue(`${$var}`);
};

var setCssVar = function($var, $value) {
  return document.querySelector("html").style.setProperty($var, $value);
};