通过选择下拉列表项动态更改 css

Question

我有以下带有是或否选项的下拉列表-:`

<asp:DropDownList ID="ddlchangecss" runat="server">
    <asp:ListItem Text="yes">yes</asp:ListItem>
    <asp:ListItem Text="no"></asp:ListItem>
</asp:DropDownList>

我想像那样动态添加一个css-:

.imgFullWidth {
    width: 100%; 
    height: auto; 
    float: left; 
    margin: 0px 0px 20px 0px;
}

当我 select 是下拉列表中的选项时。我该怎么做？

Answer 1

我已经为您创建了一个工作示例。你可以找到 the jsfiddle in here

这段代码使用了JQuery。（请记住，对于这些类型的任务，JQuery 是你的朋友 =]）。

HTML

<select id="dropDownMenu">
    <option value="option1" selected="selected">yes</option>
    <option value="option2">no</option>
  </select>
<br>
<img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg">

Javascript

function changeStyle(){
    $('#picture').addClass('imgFullWidth');
}

$('#dropDownMenu').change(changeStyle);

我用了你的 CSS 所以那里没有变化。

通过选择下拉列表项动态更改 css

change css dynamically by selecting dropdown list item

html

css

jquery

drop-down-menu