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

【问题标题】：change css dynamically by selecting dropdown list item通过选择下拉列表项动态更改 css
【发布时间】：2015-09-07 12:57:51
【问题描述】：

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

<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;
}

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

【问题讨论】：

你想对哪个元素这样做？你尝试过什么吗？
不管你的意思是什么，我相信周围有很多重复的问题。请多努力。

标签： jquery html css drop-down-menu

【解决方案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，所以那里没有变化。

【讨论】：