用javascript修改html元素的class
实例JavaScript代码
需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。
<script type="text/javascript">
    function over(){
        var para = ElementById("testPara").className = "testOver";
    }
    function out(){
        var para = ElementById("testPara").className = "testNormal";
    }   
</script>
HTML代码
本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。
<p id="testPara" class="testNormal" onmouseover="over()" onmouseout="out()">
    我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。   
</p>
   
CSS
CSS代码设置了两个测试用的样式。
.testNormal {
    border:1px solid black;
    }
.testOver {
    background:#999999;
    border:1px solid black;
    font-weight:bold;
    padding:3em;
    }
JavaScript重定向
实例JavaScript代码
本例定义了两个JavaScript函数，功能都是重定向到首页，但是第一个函数采用的是直接给href赋值的方式，第二个使用的是replace方法。具体请看下面的代码：
<script type="text/javascript">
    function goBack(){
        location.href = "www.cainiao8/";
    }
    function goBackRep(){
        location.replace("www.cainiao8/");
    }
</script>
HTML代码
<p>
    点击后面的按钮就可以使得页面转向首页，
    可以点击浏览器的后退按钮返回本页。
    使用的方法是直接给location.href赋值。
</p>
<button onclick="goBack(); return false;" value="重定向到首页">
    重定向到首页</button>
<p>
    点击后面的按钮就同样会跳转到首页，但是
    由于是使用place的方法，所以不能
    通过浏览器的后退按钮返回本页。
</p>
<button onclick="goBackRep(); return false;" value="重定向到首页(不能返回)" >
javascript免费教程
JavaScript弹出窗口以及窗口间的通信
本网页JavaScript代码
本网页JS，只有一个函数，它负责打开一个300*300的网页。
<script type="text/javascript">
    function test(){
        window.open('04_popup_test.html','popup','width=300,height=300')
    }
</script>
HTML代码
<form action="#">
<button onclick="test(); return false;" value="test" >点击测试</button>
</form>
JavaScript对象当作关联数组
HTML代码
本例的HTML代码比较简单，一个select元素用来罗列出来可选的背景。而按钮则负责触发事件，调用函数。
<select id="selectColor" name="backgroundColor">
    <option value="aqua">aqua</option>
    <option value="black">black</option>
    <option value="blue">blue</option>
    <option value="fuchsia">fuchsia</option>
    <option value="gray">gray</option>
    <option value="green">green</option>
    <option value="lime">lime</option>
    <option value="maroon">maroon</option>
    <option value="navy">navy</option>
    <option value="olive">olive</option>
    <option value="purple">purple</option>
    <option value="red">red</option>
    <option value="silver">silver</option>
    <option value="teal">teal</option>
    <option value="white">white</option>
    <option value="yellow">yellow</option>
</select>
    <button onclick="setProperty(); return false;">设置背景颜</button>
用JavaScript批量访问HTML元素
实例JavaScript代码
本例的代码中，我们定义一个名为test的函数，首先，我们获得id为testUL的ul，之后再将所有的li元素存储在一个数组中。最后，遍历数组，给每个li添加鼠标事件。当鼠标经过的时候，将元素的class设置为important，当鼠标移开的时候再将该class这只为空。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。