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

①使用(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. php用户注册页面利用js进行表单验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Java方法-对指定信息基于相关维度进行分组

    近期项目中需要针对多种不同来源指定的相同类型内容进行合并,实现过程中需要根据指定的相关维度,对资源内容进行分组,如识别是否可以为同一人员信息,是否为同一个歌曲或影视信息,因此针对实现的具体细节做如下备 ...

  3. Golang笔记(一)简洁的语言风格

    Golang笔记(一)简洁的语言风格 概述 Golang继承了很多C语言的风格,寡人使用了十几年C语言,切换到Golang时上手很快,并且随着深入的使用,越来越喜欢这门语言.Golang最直观的感受是 ...

  4. Object公用方法

    Object是所有类的父类,任何类都默认继承Object. Object类到底实现了哪些方法?   1.clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否 ...

  5. Sharepoint2010新建一个用户的方法

    最近在做关于SharePoint的相关开发,在开发中需要用到测试用户进行相关权限的测试,所以就需要创建一个新的用户进行,但是在网上找了很久都没有找到关于创建一个新用户的资料,最后终于在http://w ...

  6. Java中mouseDragged有效mouseMoved没响应的可能原因

    1.这个问题在jdk7与jdk8上都会出现. 2.具体表现为: 单独写个测试例子,用JFrame实现了mouseMoved接口,mouseDragged和mouseMoved都输出方法名和坐标,结果是 ...

  7. NPOI Excel表格处理

    //创建一个Excel文件 HSSFWorkbook work = new HSSFWorkbook(); //新建一个工作表 ISheet sheet1 = work.CreateSheet(&qu ...

  8. Struts2 简介及学习方法介绍

    Struts2 =  webwork + struts1.x 尊重学习规律的操作 学习上痛苦的根源之一是只能走的时候逼我来跑 不是说深入的内容就不讲了,而是放到合适的时候讲 一段时间可以,长了集中不了 ...

  9. myeclipse中如何修改Servlet模板_day01

    参考网址:https://jingyan.baidu.com/article/0eb457e536d5a503f1a90593.html 如果你在web项目下创建一个Servlet类,那么它会自带很多 ...

  10. Microsoft EDP(enterprise database protection)配置策略中的三种Rule template

    搭建Microsoft EDP环境: Microsoft 10 insider preview,Microsoft Intune,ie10(要安装插件silverlight) 这里暂时只说在进行配置策 ...