簡體   English   中英

將.value分配給CSS樣式

[英]Assigning .value to CSS style

我正在做一個小項目。

就是這個 我想讀取文本字段,然后將我從中讀取的值分配給css規則。

    document.getElementById("BD").value;

我希望將要讀取的值分配給border-radius。

   .style.border-radius:<VALUE>px;

但是如何建立鏈接。

然后,如果我有3個div,它們都具有單獨的名稱,我該如何解決它們僅分配給我選擇的div的問題?

編輯:完整的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opdracht 1</title>

<link rel="stylesheet" type="text/css" href="css.css" />
<script language="javascript">
function BorderDikte(){
    document.getElementById("BD").value;
    document.getElementById("BS").value;
    document.getElementById("BK").value;
}

</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
  <tr>
    <td width="318">Border dikte (thin, medium, thick)</td>
    <td width="419"><textarea id="BD"></textarea></td>
  </tr>
  <tr>
    <td>Border soort (dashed, dotted, solid or double)</td>
    <td><textarea id="BS"></textarea></td>
  </tr>
  <tr>
    <td>Border kleur (bijvoorbeeld #000 of #FFF</td>
    <td><textarea id="BK"></textarea></td>
  </tr>
  <tr>
    <td>Welke Div? ( 1, 2 of 3)</td>
    <td><textarea id="DN"></textarea></td>
  </tr>
  <tr>
    <td align="center"></td>
    <td>&nbsp;<button>Go</button></td>
  </tr>
  <tr>
    <td align="center"></td>
    <td>&nbsp;<button>Reset</button></td>
  </tr>
  <tr>
    <td align="center"></td>
    <td>&nbsp;<button>Onzichtbaar</button></td>
  </tr>
</table>

</body>
</html>

編輯2:

我想我必須重新打扮...

[] [] []

Border = thick
Border color = #0F0
Border style = Solid
Which div = 2
Press go

現在讀取值,然后將其處理到我的CSS中,以便現在調整第二個div(div 2)。

[] **[]** []

     ^
     Red and solid

Border       = [textfield empty]
Border color = [textfield empty]
Border style = [textfield empty]
Which div?   = [textfield empty]

像這樣:

的HTML

<div id = "one"></div><div id = "two"></div><div id = "three"></div>

Java腳本

var bordRad = parseInt(document.getElementById("BD").value, 10);
document.getElementById("one").style.borderRadius = bordRad + "px";

我可能會誤解了您的問題,請澄清一下,和/或添加一些代碼。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM