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

以下是您尝试实现的实例。

你正在设置<?php $this->_redirect('adminhtml/dashboard') ?> id 2个不同的时间，这让我很难理解。我将您的选择ID重命名为lineHeight，并将颜色标记更改为lineHeightSelect。

＆＃13;

type="color"

＆＃13;

    $(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());
      });
      
    });

＆＃13;

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

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

更改更改元素的hr属性

3 个答案: