javascript - 将 .value 分配给 CSS 样式

标签 javascript html css

我正在做一个小元素。

事情是这样的。 我想要读取文本字段,然后需要将我从中读出的值分配给 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>

Javascript

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

不过我可能误解了你的问题,请澄清,和/或添加你的一些代码。

关于javascript - 将 .value 分配给 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18446783/

相关文章:

使用 Selenium + istanbul 的 javascript 代码覆盖率

html - 在 ahk/html 脚本中更改图像颜色

javascript - 从数组中随机获取值 onload 到类

css - 具有内部 span/div 的 DIV 水平自动边距

javascript - Qml 属性钩子(Hook)

javascript - 当数组有元素时返回 Array[0] 的函数 | typescript /Javascript

html - div 样式 ="overflow:auto"在 IE 10 中无法正常工作

css - 透明 png 作为背景图像

javascript - Owl Carousel 中堆叠的图像

javascript - 将函数作为 props 传递给函数组件