JS 设置css样式和window.onload

来源：互联网发布：苹果mac系统更新不了编辑：程序博客网时间：2024/06/06 09:54
<!DOCTYPE html><html>  <head>    <title>javascript01.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script type="text/javascript">    //window.onload是一个事件，类似于document.getElementById('xx').onclick = function(){xxx};  这里的init就是一个方法，var init = function(){xx}    window.onload = init;    //这样可以省略body上写onload="init()",但是这里如果这样写window.onload=init();表示的意思是init()方法的返回值赋值给前面的，不是window.onload指向init方法了。        console.log('测试方法的调用');        f1();  //这个可以执行        //f2();   //这个就会报错,说没有定义        function f1(){            console.log('f1');        }        var f2 = function(){            console.log('f2');        }        f2();  //执行        console.log('简单事件');        with(document){    //此时花括号中的所有代码都是基于document作为根对象，当使用write(xxx)就等于document.write(xxx).            write('aaa<br/>');            write('bbb<br/>');            write('ccc<br/>');        }        function fn1(obj){            console.log(obj);  //obj就是标签span对象            console.log(obj.innerHTML);        }        function fn2(obj){            obj.style.color = '#f00';   //设置这个对象的颜色，在js中设置文本的样式通过xxx.style.样式名称            obj.style.fontSize = '25px';  //当使用代码来设置样式的时候，如果在css中通过-来表示的，都使用驼峰标识，如font-size变为fontSize        }        function fn3(obj){            obj.style.color = '#000';            obj.style.fontSize = '12px';        }        function init() {            document.getElementById("clickMe").style.color="#f00";        }    </script>  </head>  <body>    <span onclick="fn1(this)">click me</span><br/>    <span onmouseover="fn2(this)" onmouseout="fn3(this)">鼠标移上去试试</span><br>    <span id="clickMe">页面加载完执行</span>  </body></html>
阅读全文
0 0