用JS更改CSS使用變量

我用簡單的腳本製作了一個簡單的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>&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。

編輯：它有用添加的問題或問題。

腳本IM使用不會做的伎倆。我找不到原因。我一直忙於一整天

來源

2013-08-26 Chris Holstein

......和你的問題是....？？？？ –

@Diodeus加入我的問題... Wasnt到智能錯過的那部分 –

請加一個js撥弄它會更容易調試 –

我認爲你正在尋找這樣的事情 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-26 21:43:20

這裏是一個小這是我在閱讀其他帖子後提出的。

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-18 20:24:04 RocketShipp

用JS更改CSS使用變量

回答

相關問題