在所有的产品设计中,选择最适用的工具去解决问题是最基本的原则。

①使用(X)HTML去搭建文档的结构。

②使用CSS 去设置文档的呈现效果。

③使用DOM脚本去实现文档的行为。

文档中的每个元素都是一个对象,每个元素都有一个style属性,它们是一个对象。

样式都存放在style对象的属性里:element.style.property;

使用style对象的color属性:element.style.color;

减号和加号之类的操作符是保留支付,不允许用在函数或者变量的名字里。这同时意味着它们也不能用在方法或属性的名字里。当你需要引用一个中间带减号的CSS属性的时候,DOM要求你用驼峰命名法。CSS属性font-family变为DOM属性fontFamily:element.style.fontFamily;

内嵌样式:通过style属性获取样式有很大的局限性。style属性只能返回内嵌样式。只有把CSS style属性插入到标记里,才可以用DOM style属性去查询那些信息。

在外部样式表里声明的样式不会进入style对象,style对象只包含在HTML代码里用style属性声明的样式。

style对象可以用来更新样式:

element.style.property=value;

style对象的属性值永远是一个字符串。

style对象的属性的值必须放在引号里,单引号或双引号均可。

只要有可能,最好选用CSS为文档设置样式。

如果想要改变某个元素的呈现效果,使用CSS;如果想要改变某个元素的行为,使用DOM;

className属性:className属性是一个可读/可写的属性,凡是元素节点都有这个属性。

可以用className属性得到一个元素的class属性:element.className;

用className属性和赋值操作符设置一个元素的class属性:element.className=value;

把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象。

CSS-DOM的更多相关文章

  1. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  2. [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

    DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...

  3. Html,Css,Dom,javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  4. html+css+dom补充

    补充1:页面布局 一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w. <!DOCTYPE html> <html lang="en"& ...

  5. CSS - DOM 经常使用方法

    offset() 方法返回或设置匹配元素相对于文档的偏移(位置). 包括两个属性值:top,left. position() 方法返回匹配元素相对于父元素的位置(偏移). 包括两个属性值:top,le ...

  6. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

  7. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  8. Jquery5 基础 DOM 和 CSS 操作

    学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScr ...

  9. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  10. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

随机推荐

  1. ruby逻辑判断符号

    puts true and false  #相当于 (puts true) and false Use &&/|| for boolean expressions, and/or fo ...

  2. Android下常见的内存泄露 经典

    转自:http://www.linuxidc.com/Linux/2011-10/44785.htm 因为Android使用Java作为开发语言,很多人在使用会不注意内存的问题. 于是有时遇到程序运行 ...

  3. ToDictionary写法

    把List集合转化成Dictionary public ActionResult Dimo() { Dictionary<string, Object> param = new Dicti ...

  4. wait/notify

    某面试题,实现一个生产者——消费者模型 题目:采用多线程技术,通过wait/notify,设计实现一个符合生产者和消费者问题的程序,对某一个对象(枪膛)进行操作,其最大容量是20颗子弹,生产者线程是一 ...

  5. Start activity with App Chooser or not ?

    启动一个Activity,可以直接使用Intent,例如: Intent intent = new Intent(Intent.ACTION_SEND); ... startActivity(inte ...

  6. Hibernate课程 初探一对多映射4-3 测试--信息查询

    建立双向一对多关系,既可以由一方查询多方信息,同样可以由多方查询一方信息 demo: //查询学生所在班级 public static void showGidByStudent(){ Session ...

  7. .Net Core 应用框架。

    1.分布式系统框架  https://github.com/MassTransit/MassTransit 2.搜索引擎  https://github.com/XiLife-OSPC/Masuit. ...

  8. jQuery中的CSS-DOM操作

    html代码 <p style="color:blue;">武汉PHP培训-武汉长乐教育</p> css()方法 $("p").css( ...

  9. vue2.0高仿饿了么better-scroll

    首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"& ...

  10. 也谈ThreadLocal

    欢迎赐教博客地址(http://www.cnblogs.com/shizhongtao/p/5358411.html) 对于ThreadLocal使用,网上一堆一堆的.什么内存泄露,什么线程不安全.这 ...