我用一个简单的脚本制作了一个简单的 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> <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。
编辑:添加问题很有用。
我使用的脚本无法解决问题。我不知道为什么。我忙了一整天
最佳答案
我想你正在寻找这样的东西 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);
关于javascript - 使用变量更改 CSS 和 JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18452773/