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

①使用(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. Android Studio CMake依赖第三方库

    这里实现一个简单的功能在APP里调用libnative-lib.so里的add.libnative-lib.so去调用libthird.so里的third_add来实现 JniUtil public ...

  2. 关于火狐不响应event.keyCode解决方法

    <body onkeydown="enterkey(event)"> <!-- 点击键盘即触发 enterkey函数 --> function enterk ...

  3. git使用笔记-日志

    1.查看函数的历史修改 git log -L :git_deflate_bound:zlib.c2.查看HEAD的所有记录 git reflog $ git reflog 1a410ef HEAD@{ ...

  4. 【LDAP】LDAP 中 CN, OU, DC 的含义

    1. LDAP的存储规则 区分名(DN,Distinguished Name) 和自然界中的树不同,文件系统/LDAP/电话号码簿目录的每一片枝叶都至少有一个独一无二的属性,这一属性可以帮助我们来区别 ...

  5. Python 参数设置

    1. 配置文件(ConfigParser模块) 1.1 ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.s ...

  6. react做股票、期货交易遇到的问题(不完全是react)及解决方法。

    公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...

  7. Java类的初始化顺序 (静态变量、静态初始化块、变量、初始...

    很有意思的一篇文章 1.没有继承 静态变量->静态初始化块->变量->变量初始化块->构造方法 2.有继承的情况 父类静态变量->父类静态初始化块->子类静态变量- ...

  8. 软件测试技术第一次试验之——JUnit的安装与使用

    众所周知,在一个大型的软件项目中,测试是必不可少的.传统的测试方法往往要自己编写测试函数再结合测试用例进行验证,这样会显得比较繁琐.所以我们可以使用JUnit框架进行测试. 使用junit的好处就是这 ...

  9. 我对CSS选择器的认识

    我对CSS选择器的认识 一.简述 CSS选择器是对HTML元素进行选择的筛选条件,大概可以分为两类: 特征选择器——根据元素自身所具有的某种特征进行筛选,比如名称.ID.属性等: 关系选择器——根据元 ...

  10. html中的兼容 & 如何对网站的文件和资源进行优化

    一.1.双边距 BUG float引起的  使用display 2.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active (可简单看成由 爱生恨 lo ...