JS 设置css样式和window.onload_window.onload 之前可以编辑style 吗-优快云博客

本文链接：https://blog.youkuaiyun.com/yoyov/article/details/74092002

<!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>