我用簡單的腳本製作了一個簡單的HTML文件。用JS更改CSS使用變量
我想更改CSS邊境價值觀的人填寫過問。 它與厚度,風格,顏色。另外我有3個div設置來測試它,它應該只被分配到1格。 當用戶填寫所需的值時,他們應該按下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)和風格(虛線)。該腳本將其轉成變量,這些變量應在CSS按鈕(去)後才能進行設置單擊像這樣:
border: thick dashed #0F0;
(隨機順序),僅適用於由用戶選擇的DIV。
編輯:它有用添加的問題或問題。
腳本IM使用不會做的伎倆。我找不到原因。我一直忙於一整天
......和你的問題是....???? –
@Diodeus加入我的問題... Wasnt到智能錯過的那部分 –
請加一個js撥弄它會更容易調試 –