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）、スタイル（破線）の値を入力した場合。スクリプトはそれらを変数に変換します。これらの変数は、ボタン (go) が次のようにクリックされた後に 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 に答える