Jquery select menu for changing css style
I need to dynamically change the style with jQuery on a select menu. Here's what I have so far:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<div id="myText">
<p>Lorem Ipsum bla bla bla...</p>
</div>
<label for="myTextFontSize">Font-Size</label><br />
<select id="myTextFontSize">
<option label="8px" value="8px">8px</option>
<option label="9px" value="9px">9px</option>
<option label="10px" value="10px">10px</option>
<option selected="selected" label="14px">14px</option>
</select>
<script>
$("select#myTextFon开发者_开发知识库tSize").change(function() {
var str = "";
$("select#myTextFontSize option:selected").each(function() {
str += $(this).val();
});
$("#myText p").css('font-size', str);
}).trigger('change');
</script>
</body>
</html>
Any ideas on a working solution to this?
$('#myTextFontSize').change(function() {
$('#myText p').css('font-size', $(this).val());
});
Have you tried $("#myText p").css('font-size', str) ? I do not think text-size is a valid CSS attribute.
精彩评论