百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

利用HTMLElement属性方法实现CSS样式动态改变

xsobi 2024-11-26 10:14 1 浏览

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


DOM标准

DOM(Document Object Model)文档对象模型是W3C提出的技术规范,该规范与浏览器、平台、语言无关。HTML DOM是指适用于HTML的文档对象模型。因此在JavaScript中我们所认识的DOM应当可以理解为HTML DOM。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样式效果如下图:

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

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

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

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

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

以上给出了Element、HTMLElement及DOM基本概念说明,并对HTMLElement对象style属性与setAttribute方法在CSS样式改变中的应用进行了语法说明与实例分析。如需完整代码关注并私信。


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可在评论区回复。更多程序设计相关教程及实例分享,期待大家关注与阅读!相关文章链接如下:

前端设计-JavaScript实现复选框的分组单选

本文由kid编程原创,欢迎关注,带你一起长知识!

相关推荐

好用的云函数!后端低代码接口开发,零基础编写API接口

前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数,人人都能编写和发布自己的API接口

你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...

极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七,Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...