Question

我用一个简单的脚本制作了一个简单的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>

这是我的Javascript

function border(){
    var thickness       = (document.getElementById("BD").value);
    var color               = (document.getElementById("BK").value);
    var style       = (document.getElementById("BD").value);
    var div         = (document.getElementById("DN").value);

    document.getElementById(div).style.border = "thickness, color, style";
}

这是我的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;
}

快速回顾。

如果人们填写厚度（粗），颜色（＃0f0）和样式（虚线）的值。脚本将它们变成变量，这些变量应该在单击按钮（go）之后在CSS中设置：

border: thick dashed #0F0;

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

编辑：添加问题或问题非常有用。

使用的脚本不能解决问题。我无法找出原因。我一整天都在忙着

Answer 1

我认为你正在寻找这样的东西 http://jsfiddle.net/gxTuG/

为你的按钮元素添加一个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);

Answer 2

在阅读了多篇其他帖子之后，我想出了一些建议。

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

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

使用JS更改CSS使用变量

2 个答案: