JavaScript Font-Family issue in IE
Can someone think of a reason that this wouldn't work in any version of IE? I have a drop down select menu for choosing the font family of an element, which calls a javascript function to change the font-family. Here is the html...
<select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
<option> Serif </option>
<option> Arial </option>
<option> Sans-Serif </option>
<option> Tahoma </option>
<option> Verdana </option>
<option> Lucida Sans Unicode </option>
</select>
And here is the JavaScript...
function update开发者_开发百科h1family() {
var selector = document.getElementById('selecth1FontFamily');
var cssPreviewSpan = document.getElementById('h1FontFamily');
cssPreviewSpan.innerHTML = selector.value;
// also update the CSS preview
var h1 = document.getElementById('liveh1')
h1.style.fontFamily = selector.value;
}
This works to change the font family of the element in EVERY browser, minus the dreaded internet explorer. Any thoughts? I mean, it is a fairly straightforward function, I tried to think of other ways to go about it but I'm pretty much stuck. Thank you to all who read this!
If you debugged the code you would see that selector.value returns nothing.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="liveh1">Some text</h1>
<select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
<option> Serif </option>
<option> Arial </option>
<option> Sans-Serif </option>
<option> Tahoma </option>
<option> Verdana </option>
<option> Lucida Sans Unicode </option>
</select>
<script>
function updateh1family() {
var selector = document.getElementById('selecth1FontFamily');
var family = selector.options[selector.selectedIndex].value;
var h1 = document.getElementById('liveh1')
h1.style.fontFamily = family;
}
</script>
</body>
</html>
JSBin
加载中,请稍侯......
精彩评论