HTML5权威指南读书笔记20（第29章）-dom元素设置样式，media属性，CSSRuleList，cssText，便捷属性，优先级，获取属性值，计算属性

最新推荐文章于 2021-11-29 21:49:35 发布
最新推荐文章于 2021-11-29 21:49:35 发布
阅读量232 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/110235595
版权
1、概述

在这里插入图片描述

2、使用样式表

通过document.styleSheets属性访问文档中可用的CSS样式表，它会返回一组对象集合，这些对象代表了与文档关联的各个样式表

在这里插入图片描述
每个样式都由一个CSSStyleSheet对象代表，它提供了一组属性和方法来操作文档里样式。
在这里插入图片描述

<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <br/>
    <p id="block2">
      大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
    </p>
    <br/>
    <div id="palceholder"></div>
    
    <script type="text/javascript">
      var palceholder=document.getElementById("palceholder");
      var sheets=document.styleSheets;

      for(var i=0;i<sheets.length;i++){
        var newElem=document.createElement("table");
        newElem.setAttribute("border",1);
        addRow(newElem,"index",i);
        addRow(newElem,"href",sheets[i].href);
        addRow(newElem,"title",sheets[i].title);
        addRow(newElem,"type",sheets[i].type);
        addRow(newElem,"ownNode",sheets[i].ownerNode.tagName);
        palceholder.appendChild(newElem);
      }
      
      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }  
    </script>
</body>
3、使用媒介限制CSSStyleSheet.Media

可以使用media属性来限制样式应用的场合。可以使用CSSStyleSheet.Media属性访问这些限制，它会返回一个MediaList对象
在这里插入图片描述

<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <br/>
    <p id="block2">
      大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
    </p>
    <br/>
    <div id="palceholder"></div>
    
    <script type="text/javascript">
      var palceholder=document.getElementById("palceholder");
      var sheets=document.styleSheets;

      for(var i=0;i<sheets.length;i++){
        if(sheets[i].media.length>0){
          var newElem=document.createElement("table");
          newElem.setAttribute("border","1");

          addRow(newElem,"Media Count",sheets[i].media.length);
          addRow(newElem,"Media Text",sheets[i].media.mediaText);
            for(var j=0;j<sheets[i].media.length;j++){
              addRow(newElem,"Media"+j,sheets[i].media.item(j))
            }
            palceholder.appendChild(newElem);

        }
        
      }
      
      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
4、禁用样式表CSSStyleSheet.disabled
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <br/>
    <p id="block2">
      大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var pressme=document.getElementById("pressme");
      var sheets=document.styleSheets;

      pressme.onclick=function(){
        sheets[0].disabled=!document.styleSheets[0].disabled;
      }
    </script>
</body>
5、CSSRuleList对象的成员

CSSRuleList.cssRules属性会返回一个CSSRuleList对象代表，它允许你访问样式表里的各种样式。
在这里插入图片描述

<head>
    <style type="text/css">
        p{ border:medium double black;background-color: blanchedalmond;}

        #block1{color: white;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}

    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <br/>
    <p id="block2">
      大咖级的反馈点句法发电机房都是看方法就都是浪费绝对是发防守打法级大风及科技
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var pressme=document.getElementById("pressme");
      var palceholder=document.getElementById("palceholder");
      var sheets=document.styleSheets;

      pressme.onclick=function(){
        document.styleSheets[0].cssRules.item(1).selectorText="#block2"

        if(palceholder.hasChildNodes()){
          var chilCount=palceholder.childNodes.length;
          for(var i=0;i<chilCount;i++){
            palceholder.removeChild(palceholder.firstChild);
          }
        }

        processStyleSheet();
      }

      function  processStyleSheet(){
        var ruleList=document.styleSheets[0].cssRules;
        for(var i=0;i<ruleList.length;i++){
          var rule=ruleList.item(i);

          var newElem=document.createElement("table");
          newElem.setAttribute("border","1");
          addRow(newElem,"parentStyleSheet",rule.parentStyleSheet.title);
          addRow(newElem,"selectorText",rule.selectorText);
          palceholder.appendChild(newElem);
        }

      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
6、使用元素样式CSSStyleDeclaration.cssText
<head>
    <style type="text/css">
        p{ border:medium double black;background-color: blanchedalmond;}

        #block1{color: white;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}

    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var pressme=document.getElementById("pressme");
      var palceholder=document.getElementById("palceholder");
      var targetElem=document.getElementById("block1");

      displayStyle();
      
      pressme.onclick=function(){
        targetElem.style.cssText="color:green";
        displayStyle();

      }

      function  displayStyle(){
        if(palceholder.hasChildNodes()){
          palceholder.removeChild(palceholder.firstChild);
        }
        
        var newElem=document.createElement("table");
        addRow(newElem,"Element CSS",targetElem.style.cssText);
        palceholder.appendChild(newElem);

      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
7、使用CSSStyleDeclation对象（便捷属性）

在这里插入图片描述
通过CSSStyleDeclation对象完全控制css
操作CSSStyleDeclaration对象最简单的方式是使用便捷属性，分别对应各个Css属性。说白了就是直接改。

便捷属性的一般命名规则是：

  • 基本和css同名
  • 多单词的属性去掉横线-，然后大写第二个及之后单词的首字母
  • css属性和便捷属性都对应着
  • 如果没有给css属性设置值，则对应的便捷属性就会返回一个空白字符串“”
<head>
    <style type="text/css">
       p{ border:medium double black;background-color: blanchedalmond; }

        #block1{color: white; border: 1px solid gray;padding: 15px;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
        td{padding:2px}
    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <p id="block2">
      的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var pressme=document.getElementById("pressme");
      var palceholder=document.getElementById("palceholder");

      displayStyles();
      pressme.onclick=function(){
        document.styleSheets[0].cssRules.item(1).style.paddingTop="10px";
        document.styleSheets[0].cssRules.item(1).style.paddingRight="12px";
        document.styleSheets[0].cssRules.item(1).style.paddingLeft="5px";
        document.styleSheets[0].cssRules.item(1).style.paddingBottom="5px";
        displayStyles();
      }

      function  displayStyles(){
        if(palceholder.hasChildNodes()){
          var childCount=palceholder.childNodes.length;
          for(var i=0;i<childCount;i++){
            palceholder.removeChild(palceholder.firstChild);
          }
        }

        displayStyleProperties(document.styleSheets[0].cssRules.item(1).style);
        displayStyleProperties(document.getElementById("block2").style);

      }

      function displayStyleProperties(style){
        var newElem=document.createElement("table");
        newElem.setAttribute("border","1");
        addRow(newElem,"border",style.border);
        addRow(newElem,"color",style.color);
        addRow(newElem,"padding",style.padding);
        addRow(newElem,"paddingTop",style.paddingTop);

        palceholder.appendChild(newElem);

      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
8、使用常规属性

当程序不知道便捷属性的时候，只能使用常规属性

<head>
    <style type="text/css">
        p{ border:medium double black;background-color: blanchedalmond; }

        #block1{color: white; border: 1px solid gray;padding: 15px;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
        td{padding:2px}
    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <p id="block2">
      的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var pressme=document.getElementById("pressme");
      var palceholder=document.getElementById("palceholder");

      displayStyles();
      pressme.onclick=function(){
        var styleDeclar=document.styleSheets[0].cssRules[0].style;
        //以下使用的是常规属性
        styleDeclar.setProperty("background-color","lightgray");
        styleDeclar.setProperty("padding-top","20px");
        styleDeclar.setProperty("color","blue");
        displayStyles();
      }

      function  displayStyles(){
        if(palceholder.hasChildNodes()){
          var childCount=palceholder.childNodes.length;
          for(var i=0;i<childCount;i++){
            palceholder.removeChild(palceholder.firstChild);
          }
        }

        var newElem=document.createElement("table");
        newElem.setAttribute("border","1");

        var style=document.styleSheets[0].cssRules[0].style;
        //获取的也是常规属性
        addRow(newElem,"border",style.getPropertyValue("border"));
        addRow(newElem,"color",style.getPropertyValue("color"));
        addRow(newElem,"padding",style.getPropertyValue("padding-top"));
        addRow(newElem,"background-color",style.getPropertyValue("background-color"));

        palceholder.appendChild(newElem);

      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
9、用程序方式探索属性

枚举样式表第一条样式的所有属性

<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <p id="block2">
      的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var pressme=document.getElementById("pressme");
      var palceholder=document.getElementById("palceholder");

      displayStyles();

      function  displayStyles(){
        var newElem=document.createElement("table");
        newElem.setAttribute("border","1");

        var style=document.styleSheets[0].cssRules[0].style;
        for(var i=0;i<style.length;i++){
          addRow(newElem,style[i],style.getPropertyValue(style[i]));
        }
        palceholder.appendChild(newElem);

      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
10、getPropertyPriority获知样式属性的重要性（优先级）

getPropertyPriority对高优先级的值会返回important，如果没有指定重要性则会返回一个空白字符串（“”）

<head>
    <style type="text/css">
        p{ border:medium double black;background-color: blanchedalmond; }

        #block1{color: white; border: 1px solid gray;padding: 15px;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
        td{padding:2px}
    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <p id="block2">
      的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var palceholder=document.getElementById("palceholder");

      displayStyles();

      function  displayStyles(){
        var newElem=document.createElement("table");
        newElem.setAttribute("border","1");

        var style=document.styleSheets[0].cssRules[0].style;
        for(var i=0;i<style.length;i++){
          addRow(newElem,style[i],style.getPropertyPriority(style[i]));
        }
        palceholder.appendChild(newElem);

      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
11、CSSStyleDeclaration.getPropertyCSSValue方法使用细粒度的CSS DOM对象

使用CSSStyleDeclaration.getPropertyCSSValue方法获取CSSPrimitiveValue对象
在这里插入图片描述

CSSPrimitiveValue对象的关键在于primitiveType属性，会告诉你属性的值是用什么单位表达的
在这里插入图片描述

<head>
    <style type="text/css">
        p{ border:medium double black;background-color: blanchedalmond; }

        #block1{color: white; border: 1px solid gray;padding: 15px;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
        td{padding:2px}
    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <p id="block2">
      的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var palceholder=document.getElementById("palceholder");

      displayStyles();

      function  displayStyles(){
        var newElem=document.createElement("table");
        newElem.setAttribute("border","1");

        var style=document.styleSheets[0].cssRules[0].style;
        for(var i=0;i<style.length;i++){
          var val=style.getPropertyCSSValue(style[i]);//报错

          if(val.primitiveType==CSSPrimitiveValue.CSS_PX){
            addRow(newElem,style[i],val.getFloatValue(CSSPrimitiveValue.CSS_PX),"pixels");
            addRow(newElem,style[i],val.getFloatValue(CSSPrimitiveValue.CSS_PT),"points");
            addRow(newElem,style[i],val.getFloatValue(CSSPrimitiveValue.CSS_IN),"inches");
          }else if(val.primitiveType==CSSPrimitiveValue.CSS_RGBCOLOR){
              var color=val.getRGBColorValue();
              addRow(newElem,style[i],color.red.cssText+" "+color.green.cssText+" "+color.blue.cssText,"color");
          }else{
            addRow(newElem,style[i],val.cssText,"(other)");
          }
        }
        palceholder.appendChild(newElem);
      }

      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>

报错，getPropertyCSSValue报错

12、document.defaultview.getComputedStyle使用计算样式
<head>
    <style type="text/css">
        p{ border:medium double black;background-color: blanchedalmond; }

        #block1{color: white; border: 1px solid gray;padding: 15px;}
        #block2{color: red; font-style: italic;}

        table{border: thin solid black; border-collapse: collapse; margin:5px; float: left;}
        td{padding:2px}
    </style>
</head>
<body>
    <p id="block1">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <p id="block2">
      的说法递四方速递撒旦法第三方开价多少发开价多少范德萨范德萨看风景
    </p>
    <br/>
    <div id="palceholder"></div>
    <button id="pressme">pressme</button>
    <script type="text/javascript">
      var palceholder=document.getElementById("palceholder");

      displayStyles();

      function  displayStyles(){
        var newElem=document.createElement("table");
        newElem.setAttribute("border","1");

        var targetElem=document.getElementById("block1");
        var style=document.defaultView.getComputedStyle(targetElem);
        addRow(newElem,"Property Count",style.length);
        addRow(newElem,"margin-top",style.getPropertyValue("margin-top"));
        addRow(newElem,"font-size",style.getPropertyValue("font-size"));
        addRow(newElem,"font-family",style.getPropertyValue("font-family"));

        palceholder.appendChild(newElem);
      }
      function addRow(elem,header,value){
        elem.innerHTML+="<tr><td>"+header+":</td><td>"+value+"<td></tr>";
      }
    </script>
</body>
心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM系列：动态添加CSS样式规则
W3cplus
06-26 4252
在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说：查询CSS样式（即计算样式），设置单个样式（设置的是行内样式），设置多个样式（通过类来设置样式）。...
[HTML5权威指南] => 读书笔记(一)
O_Yancey的博客
02-22 1422
[HTML5权威指南] 读书笔记 最基本的HTML/CSS/JavaScript知识点
HTML5权威指南----读书笔记
weixin_34278190的博客
08-20 230
<!DOCTYPE html> <html> <head> <meta name = 'keywords' content="HTML5权威指南----读书笔记"> <meta name = 'description' content="HTML5权威指南----读书笔记"> <meta cha...
《HTML5权威指南》读书笔记——Chapter01-Chapter02
GoldenBullet的博客
10-25 282
JavaScript并非HTML规范核心的组成部分，但HTML5假定可以使用JavaScript，而且想要使用HTML5中新增的一些最为引人注目的特性也需要用到JavaScript。 负责制定HTML标准的是W3C（万维网联盟），一般标准的制定滞后于其使用。 HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代富Web内容的相关技术的总称。主要包括HTML5核心规范、CSS（层叠...
《HTML5权威指南》读书笔记——Chapter05
GoldenBullet的博客
04-11 276
既可以定义内嵌脚本（脚本是HTML文档的一部分），也可以定义外部脚本（脚本包括在另一个文件中，通过一个URL引用）。（见第七章） 一个简单的内嵌脚本样例如下： 此处script元素位于文档中其他元素内容之后，这样在脚本执行之前浏览器就已经对其他元素进行了解析。 3. JavaScript的基本元素是语句，一条语句代表着一条命令，通常以分号结尾。实际上分号用不用都可以，不过加上分号可让...
js中巧用cssText属性批量操作样式
12-10
给一个HTML元素设置css属性，如 代码如下: var head= document.getElementById(“head”); head.style.width = “200px”; head.style.height = “70px”; head.style.display = “block”; 这样写太罗嗦了，为了...
JS如何设置元素样式的方法示例
10-19
1. **通过元素的`style`属性设置样式** 这是最基本和直接的方法，通过`element.style.property = value`的方式来设置样式。例如： ```javascript var box = document.getElementById("box"); box.style.width = '100...
js中巧用cssText属性批量操作样式.docx
01-21
### js中巧用cssText属性批量操作样式 #### 概述 在JavaScript中，`cssText`属性提供了一种高效的方式来批量修改HTML元素的样式。相比于传统的逐个设置`style`属性的方法，`cssText`可以一次性设置多个样式规则，这...
Vue获取DOM元素样式和样式更改示例
12-29
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误，这时候可以在 mounted 里用 $refs 来获取样式，并进行更改： <!-- ... --> [removed] 　...
HTML5权威指南读书笔记,HTML5权威指南读书笔记【第五部分】
weixin_39672194的博客
06-19 136
1、Ajax简单获取网页内容的示例:function handleButtonPress(e) {var httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = handleResponse;httpRequest.open(“GET”, e.target.innerHTML + “.html”);//httpRequ...
《HTML5权威指南》读书笔记——Chapter04
GoldenBullet的博客
04-11 358
CSS（层叠样式表）用来规定HTML文档的呈现样式（外观和格式编排）。 CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔，最后一条样式可不使用分号。此处属性值无需使用双引号。 如下两条样式声明： background-color（属性） : grey（值） ; color（属性） : white（值） 应用CSS样式的三种...
《HTML5权威指南》读书笔记——Chapter03
GoldenBullet的博客
10-26 484
HTML是一种标记语言，其标记以应用于文档内容的元素为其存在形式。<code>apples</code>为一个HTML元素示例，结构依次为开始标签、元素内容、结束标签，构成一个code元素。元素名不区分大小写，但一般习惯使用全小写。 现在HTML元素的用法应该是用来说明文档内容的结构和含义，用CSS控制内容呈现给用户的形式。 元素开始标签和结束标签之间没有内...
读《HTML5权威指南》笔记（一）
dncsdnf的博客
11-29 142
（1）标签的全局属性 accesskey属性 <!-- 键盘同时按下Alt+n键可以获取焦点 --> <input accesskey="n" /> contenteditable属性（html5新增）：启动标签的编辑功能，让用户能够修改页面的内容 contextmenu属性（目前只有 Firefox 浏览器支持 contextmenu 属性）：用来为元素设定快捷菜单 dir属性（ltr ：从左向右的文本方向 rtl ：从右向左的文本方向）：规定元素内容的文本方向 drag
HTML5权威指南读书笔记【第五部分】
清茶一杯 笔墨几点
12-11 1209
1、Ajax简单获取网页内容的示例: function handleButtonPress(e) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = handleResponse; httpRequest.open(“GET”, e.target.innerHTML + “.html”); //httpRequest.open(“GET”, e.target.innerHTML
html5权威指南—读后感
myeveryday08的专栏
03-14 934
在买这本书的时间还有点小波折，一直在考虑是在网上下载电子版，还是买纸书中徘徊，之后还是买了纸书，等到亚马逊把书寄到手中的时间，才发现书的443页到450页掉了。果断的申请换书，结果还让人满意。第二天中午书就到了。 书上讲的东西要不视频中的更加全面，而且更有说服力。可以更加自由的看自己想要了解的那个模块。我说过不急要慢慢来，并不代表时间很充分，反而说明了时间的匆忙。和稀少。现在的我正在慢慢的和游戏
《HTML5与CSS3权威指南 下册》读书笔记（1）
xld的博客
05-06 311
文章目录第19章 选择器CSS3中的属性选择器结构性伪类选择器UI元素状态伪类选择器第20章 使用选择器在页面中插入内容插入文字或图片使用content属性来插入项目编号第21章 文字与字体相关样式给文字添加阴影text-shadow让文本自动换行word-break属性让长单词与URL地址自动换行word-wrap属性使用服务器端字体——Web font与@font-face属性修改字体种类而保...
HTML5权威指南读书笔记10（第19章）--边框和背景
weixin_43745804的博客
11-23 107
1、概述 2、边框样式 border-width，border-style，border-color 3、边框样式列表 4、单边样式 5、border简写 略 6、border-radius圆角边框 <head> <style type="text/css"> .myclass{ width: 200px; height: 200px; border-radius: 15px; border: 1px solid black;} </sty
HTML5+CSS3 权威指南读书笔记
sanluo1213的博客
02-01 2141
电子书下载  HTML5与CSS3权威指南 书中源码下载  HTML5与CSS3权威指南源码 第一章：Web时代的变迁 HTML5放心使用的理由： 兼容性：HTML5在老板本的浏览器上也可以正常运行； 实用性：HTML5内部并没有封装什么很复杂的，不切实际的功能，而只是封装了简单实用的功能； 非革命性的发展：HTML5的内部功能不是革命性的，只是发展性的。 电子书
《HTML5与CSS3权威指南》读书笔记（上册）—HTML5篇
weixin_30716141的博客
07-15 147
豆瓣上的评分少且评价不太好，阅读当中发现几处刊物上的小问题，不过线下口碑貌似不错，基本上人手一本 上册五百多页，主讲H5，分为标签，本地存储，离线应用程序，新的API，获取地理位置信息标签包含表单，Canvas，多媒体等；API的话多媒体，History，拖放和通知，文件，通信等。其中一些章节只是翻了一下，如文件API，通信API更是看不懂，这两章加起来可单做一本薄书 下册为CSS3相关 ...
使用js修改DOM元素的高度方法
最新发布
09-25
方法二是使用元素的style属性配合CSS的height属性来设置元素的高度。可以通过元素的style属性配合CSS的height属性来设置元素的高度值，例如： ```javascript var element = document.getElementById('myElement'); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值