• 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中的第一个属性(也就是刚刚插入的那个)。(这说起来有点不好说)。


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

  • 相关阅读:
    vuerouter 无登录页根据权限动态添加菜单栏
    [转]Pytorch常用代码块
    colab查看gpu信息
    文本预处理
    swagger
    springboot中使用分页插件
    sqlServer数据库创建定时任务方法
    java查询的数据返回给jsp页面,通过jstl来获取后端页面数据,并显示数据
    EF Core 生成实体类
    .net core 部署无法正常跨域访问的解决方案
  • 原文地址:https://www.cnblogs.com/webhtmlcss/p/4659857.html
Copyright © 2020-2023  润新知