• 7月17日学习总结


        周末到了,“快节奏”的一周过去了,本周我们已经学习完了Javascript的3分之2左右的知识,这速度这滋味,简直酸爽,在上周五,我们学习了如何用JS对css进行操作,以及解决浏览器兼容性的问题办法。
    function $(id) {
    return document.getElementById(id);
    }
    function onMe() {
    var div1 = $("div1");
    var div2 = $("div2");
    if(div1.className == "div1") {
    div1.className = "div2";
    } else {
    div1.className = "div1";
    }
    if(div2.className == "div1") {
    div2.className = "div2";
    } else {
    div2.className = "div1";
    }
    }
    如上面的对调DIV样式的代码,我个人理解想要在JS中对css进行局部改变,要classname才可以进行。

    document.styleSheets[0].insertRule(".div2:hover{200px;height:200px;}", 2);这段代码的意思就是把第一个style(数组)中的位置2位置(IE浏览器要用addRule)。

    alert(window.getComputedStyle(div2, null).width)这个意思就是返回div2的宽度。getComputedStyle(对象,null) 火狐浏览器 用来获得实际的样式属性;;{对象.currentStyle.属性 IE浏览器 用来获得实际的样式属性}。

    alert(document.styleSheets[0].cssRules[0].cssText); 弹出第一个style里的第一个css文本。

    function onMe1() {
    alert(document.styleSheets.length);
    alert(document.styleSheets[0].cssRules[0].cssText);
    document.styleSheets[0].insertRule(".div3{200px;height:200px;}", 0);
    alert(document.styleSheets[0].cssRules[0].cssText);
    document.styleSheets[0].deleteRule(0);
    alert(document.styleSheets[0].cssRules[0].cssText);
    }
    上方代码第一行,是弹出CSS样式的style数组的长度;第三行就是在styleSheets这个数组的第一个style中的第一个属性前面插入.div3{200px;height:200px;};第五行就是删除styleSheets这个数组的第一个style中的第一个属性(也就是刚刚插入的那个)。(这说起来有点不好说)。


    上周五的知识量相对于前几天比较少,所以感觉好接受一点,希望以后我能跟上进度。好了理理思绪,随笔就到这里。

  • 相关阅读:
    函数,封装
    c++增强c
    Git安装与使用
    Ajax&Jquery
    IntelliJ Idea2018.2,Pycharm20183.2破解教程
    事务&数据库连接池&DBUtils&JSP设计模式
    JSP&EL&JSTL
    Http协议和Servlet
    接收流信息---字符串
    lucene索引库优化一
  • 原文地址:https://www.cnblogs.com/webhtmlcss/p/4659857.html
Copyright © 2020-2023  润新知