1

我用一个简单的脚本制作了一个简单的 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）和样式（虚线）的值。脚本将它们转换为变量，这些变量应在单击按钮（开始）后在 CSS 中设置，如下所示：

border: thick dashed #0F0;

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

编辑：添加问题或问题很有用。

我使用的脚本不能解决问题。我不知道为什么。我整天都在忙

4

2 回答 2

2

我想你正在寻找这样的东西 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);
于 2013-08-26T21:43:20.387 回答
1

这是我在阅读了多篇其他帖子后想出的一点。

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

var setCssVar = function($var, $value) {
  return document.querySelector("html").style.setProperty($var, $value);
};
于 2017-07-18T20:24:04.970 回答