變化小時的屬性

Question

我想這一定是簡單的做到這一點，但我沒有經驗，JavaScript和它越來越難以給我。 我有我的頁面上的hr元素無一不顏色選擇器，並從1到10 不同值的下拉列表我需要做的是改變HR高度和顏色時，顏色選擇器或下拉列表改變其值。

這裏是我的html代碼：

<div id="colourSelector" class="row"> 
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="text" style="display: none;"><div class="colorPicker-picker" style="background-color: rgb(204, 204, 204);">&nbsp;</div></div> 

<div id="lineHeight" class="row"> 
<select name="lineHeight" id="lineHeight"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
</select></div> 

<div id="divlineDemo" class="section row"> 
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;"> </div> 

JS代碼：

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var val= $("select#lineHeight").val(); 
     $("select#lineDemo").height().value; 
    }); 
</script> 

Answer 1

jQuery('#lineHeight').on('change',function(){ jQuery('#lineDemo').css('color','red').css('height','4px') 

Answer 2

$('#lineHeight').change(function() { 
    var val = $('option:selected', this).val(); 
    $('#lineDemo').css('height', val+'px') 
}) 
$('#backgroundcolor').change(function() { 
    var val = $(this).val(); 
    $('#lineDemo').css('background-color', val) 
}) 

Demo

我用所選選項的值作爲height of the hr

Answer 3

這裏是你想達到什麼樣的工作示例。

要設置lineHeight這引起我頭疼找出ID兩個不同的時間。我將您選擇的ID重命名爲lineHeightSelect，並將換色器更改爲type="color"。

$(function() { 
 
     var colorPicker = $('#backgroundcolor'); 
 
     var headline = $('#lineDemo'); 
 
     var lineHeight = $('#lineHeightSelect'); 
 
     
 
     lineHeight.on("change", function(){ 
 
     headline.css("height", $(this).val() + "px"); 
 
     }); 
 
     
 
     colorPicker.on("change", function() { 
 
     headline.css('backgroundColor', $(this).val()); 
 
     }); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="colourSelector" class="row"> 
 
    <input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="color" style="display: block;"> 
 

 
</div> 
 

 
<div id="lineHeight" class="row"> 
 
    <select name="lineHeight" id="lineHeightSelect"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    </select> 
 
</div> 
 

 
<div id="divlineDemo" class="section row"> 
 
    <hr id="lineDemo" style="height: 2px; background-color: red; border: 0;"> 
 
</div>