欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js写css样式(详解js写html代码)

程序员文章站 2023-12-01 18:56:22
通过使用文档对象模型dom,可以将html文件当做文档对象,并按照文档对象处理方法进行处理。主要处理形式包括设置html标记文本内容、设置元素属性值及对style样式进行操作等。本文主要介绍使用文档对...

通过使用文档对象模型dom,可以将html文件当做文档对象,并按照文档对象处理方法进行处理。主要处理形式包括设置html标记文本内容、设置元素属性值及对style样式进行操作等。本文主要介绍使用文档对象模型dom所提供的element、htmlelement等实现对元素style样式进行快速设置。


dom标准

dom(document object model)文档对象模型是w3c提出的技术规范,该规范与浏览器、平台、语言无关。html dom是指适用于html的文档对象模型。因此在javascript中我们所认识的dom应当可以理解为html dom。dom标准相关对象关系描述如下图所示:

js写css样式(详解js写html代码)

dom标准概念与关系

在dom标准对象描述中可以看出所有的对象都继承于node对象,node对象是dom文档对象模型的核心。在javascript文档对象模型中,document对象、element对象等都继承于node对象,而htmldocument对象与htmlelement对象等又分别继承于document对象与element对象。

element对象提供了html页面中所有的元素方法与属性。我们可以借助htmlelement对象实现对html页面元素进行操作与属性值读写等


htmlelement设置css样式

htmlelement对象继承自element对象,因此具有其父类的基本属性与方法。在element对象主要提供style属性与setattribute()方法实现对元素样式属性及属性值进行设置。两种方法描述如下:

1、style属性

style属性是htmlelement继承自父类element的基本属性之一,主要用于对html样式属性进行设置或者样式属性值的读取。在进行样式属性值设置过程中可以分为两种方式进行设置。第一种为设置单个特定style样式,如设置background-color属性值,我们可直接使用如下方法进行设置:

htmlelement.style.property=value;

第二种设置方法是同时对某个元素全部style样式进行重新设置,这种情况下我们使用style.csstext属性进行整体属性设置,设置语法描述如下:

htmlelement.style.csstext="property1:value1;...propertyn:valuen";

2、setattribute()方法设置css

setattribute()方法也是element对象的基本方法之一,主要用于设置指定元素的指定属性值。如该属性值存在则更新属性值。在htmlelement对象中我们可以直接使用setattribute方法进行style属性的值的设置。其基本语法描述如下:

htmlelement.setattribute(name,value);

动态css样式设置实例

本例主要设置实现在鼠标经过某一个div时,动态改变该div层的style样式属性,主要改变属性包括背景颜色、字体大小及光标形状等。设计原始div样式效果如下图:

js写css样式(详解js写html代码)

原始css样式

该案例原始css样式实现代码描述如下图所示:

js写css样式(详解js写html代码)

原始页面实现代码

按照实例要求我们为div层添加鼠标over事件,并编写事件处理函数用于响应鼠标处理,具体处理需要实现style样式变化要求。对该div添加onmouseover事件,响应函数名称为changestyle()。代码描述如下:

js写css样式(详解js写html代码)

事件处理函数

在该事件处理函数中我们传递了用于标识当前元素的this参数,函数在接收到该参数后能够直接定位与当前div,并进行下一步处理。changestyle方法描述如下:

js写css样式(详解js写html代码)

事件处理方法1

事件处理方法1使用style.csstext方法进行了css样式的动态设置,使用setattribure方法进行样式设置代码如下:

js写css样式(详解js写html代码)

事件处理方法2

通过编写以上代码可以实现鼠标经过div时,style样式中的背景颜色、文字大小及光标样式的动态变化,变化之后效果描述如下图:

js写css样式(详解js写html代码)

动态改变样式效果

以上给出了element、htmlelement及dom基本概念说明,并对htmlelement对象style属性与setattribute方法在css样式改变中的应用进行了语法说明与实例分析。