JavaScript css-dom

HTML负责结构层，网页的结构层由HTML或者XHTML之类的标记语言负责构建

CSS负责表示层，描述页面内容应该如何呈现。

JavaScript负责行为层，负责内容应该如何响应事件这一问题。

能利用css解决的问题不要用js去实现，能用css实现的内容不要在html中使用，每个都应该严格负责自己的领域。

文档里的每个元素都是对象（一切皆对象）

文档的每个元素节点都有一个属性style，style包含着元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串，样式都放在这个style对象的属性里

因为每个属性都会包含多个样式，所以要返回一个对象才比较好对属性进行操作！

格式：element(元素).style.property(属性样式)

如果要得到一个标签的样式：

从文档里把这个元素找出来
利用element.style.property获取样式（css样式名之间的-要用驼峰命名法来表示，否则js无法解析。例如：font-family-->fontFamily）

style属性的一个很大的局限性：style只能返回内嵌样式，即只有把css style 添加到标记里，才能用DOM style属性去查询那些信息

　　　　　　　　　　　　　　　　　　　来自外部的.css文件已经不能再用DOM style检索出来了。

ps：颜色：在css用颜色的英文名来命名颜色，如red，在js中会显示red，如果用#000000类似的用法，js会显示为RGB的格式

为内嵌样式设置属性：

style属性的各个样式，不仅可读，还可写。可以通过style属性去更新样式；

格式： element(元素).style.property(要改变的属性样式) = " value "（引号必加）；

注意：只有在css不方便的场合，才可以使用DOM对文档的样式做一些的小的增强，但是css始终是主体；

js特别擅长处理重复性任务，用一个while或者for循环就可以轻松地遍历一个很长的列表

在.CSS文件中改变样式：（确保网页的表示层和行为层分离的彻底）

与其使用DOM直接改变某个元素的样式，不如通过JavaScript代码去更新这个元素的class属性

技巧：在css样式表里写多一个class属性的样式表，利用setAttribute方法来把标签中class属性的值改变，从而得到新的样式。

className属性：有一个更简单的办法更新class的是使用className属性（是一个可读，可写的属性），只要是元素节点都有这个属性

获取元素的class值，格式： element（元素）.className

用className属性和赋值操作符可以设置一个元素的class属性值

格式： element（元素）.className = "classname"

使用这个操作可以把新的class值把原先的class的值替换掉。

但有一个问题是，我们有时并不是想要替换掉这个class值，我们只是想在原来的class的值后面再追加一个class的值。

可以使用字符串拼接的方法： element（元素）.className += " classname" 注意：在classname前面需要有一个空格

推荐步骤：

检查className属性的值是否为空
如果是，则直接把class的设置值直接赋给className
如果不是，则把一个空格和新的class设置值追加到className上面去

对函数进行抽象可以使函数的使用范围更广，通过赋予参数调用的方式；当发现可以对一个函数进行抽象时，应该立刻就去做！！！！！！

转载于:https://www.cnblogs.com/Gary-Guoweihan/p/4774673.html

JavaScript css-dom相关推荐

【前端】第二章 HTML、CSS、JavaScript、DOM和JSON
第二章 HTML.CSS.JavaScript.DOM和JSON 文章目录第二章 HTML.CSS.JavaScript.DOM和JSON 一.HTML 1.表单 2.小票 3.注册页面 4.音视频 ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
Javaweb学习笔记——（三）——————JavaScript基础DOM基础
day03 1.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript 之 DOM中的三大对象
下面是对JavaScript DOM中三大对象的整理,希望可以帮助到有需要的小伙伴. JavaScript 之 DOM中的三大对象一.Document对象 1.Document对象是什么 Docum ...
JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点更新:更新Dom节点添加:添加一个新的节点删除:删除一个Dom节点要操作一个Do ...
JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计
登陆界面设计撸代码之前先来看一看效果图: 登陆界面由一个简单的表单(头像.用户名.密码.登陆按钮.记住我.取消.忘记密码),创建了一个CSS3的缩放效果构成.需要做浏览器(Firefox.Safar ...

JavaScript css-dom

JavaScript css-dom相关推荐

最新文章

热门文章