JavaScript BOM-----获得DOM对象的样式

最新推荐文章于 2023-11-01 09:17:09 发布
最新推荐文章于 2023-11-01 09:17:09 发布
阅读量199 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwerLoL123456/article/details/80696345
版权

获得DOM对象的样式的方法有三种，第一种：


运行结果如下


第二种：适用于IE9+的浏览器


运行结果如下


适用于IE8及其以下的浏览器，由于浏览器版本问题，无法得出运行结果，有兴趣的可以寻找相对应的浏览器试运行。


第三种 

获取对象的宽高，带边框不带单位


运行结果如下


获取对象的边框，不带边框带单位


运行结果如下


下面是一个简单的事件监测程序，当鼠标点击在div的红色区域上时，它的宽和高会增加100像素



qwerLoL123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 获取DOM元素样式
challenge_impossible的博客
05-23 7962
    HTML的样式写入方法有：1、行内样式；2、内嵌样式；3、外联样式表。    行内样式：一般是用style写在dom元素上的，例如：<div style='height:200px;'></div>;    内嵌样式：一般是用style写在head标签内的。<style type='text/css'></style>;    外联样式：一般...
DOM获取样式的值
qq_38743783的博客
09-07 541
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &
JS学习笔记（九）BOM对象学习/元素样式的读取和修改/事件性质学习/事件函数举例
CSmengy473的博客
08-11 239
JS学习笔记（九） JS学习笔记（九）BOM学习/系统对话框函数/元素样式/P110没看存档 文章目录JS学习笔记（九）一、系统对话框1.alert（）2.confirm（）3.二、元素样式1.通过JS修改元素样式2.通过JS读取元素内联样式3.通过JS读取元素非内联样式4.其他样式属性（开发常用 没看 结合CSS看）三、1.2.四、1.2.总结 一、系统对话框 1.alert（） 2.confirm（） confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。 函数的
js 获取当前dom元素的所有样式(getComputedStyle())，并且修改样式
逆风优雅的博客
04-07 6185
1. 首先getComputedStyle（）此方法用于获取当前dom的样式 getComputedStyle() 的使用方法： // getComputedStyle方法可以用来获取DOM元素实际显示时的样式 // getComputedStyle是window全局对象的一个方法，可以传递两个参数，第一个参数指定一个用来获取计算样式的DOM元素， // 第二个参数（可选）指定一个要匹配的伪元素的字符串，普通元素可省略或传null。 2. 使用setProperty（）方法来
JavaScript---BOM和DOM
weixin_65440201的博客
07-30 629
1.DOM简单学习：为了满足案例要求 1.1操作Element对象： 1.2事件简单学习 案例1：电灯开关 2.BOM 2.1概念：Browser Object Model 浏览器对象模型 2.2组成： 2.3Window：窗口对象 2.3.1创建 2.3.2方法 2.3.3属性： 2.3.4特点 案例：轮播图 2.4Location：地址栏对象 2.4.1创建(获取)： 2.4.2方法： 2.4.3属性 2.5History：历史记录对象 2.5.1创建(获取)： 2
javascript---DOM,BOM对象常用操作
weixin_50402587的博客
09-29 342
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="date" class="bgwhite"></div> </body> <script> addYear(2022) function addYear(year) { .
javaEE -15（ 12000 字 JavaScript 入门 - 2）
weixin_73232539的博客
11-01 6288
12000字 JavaScript入门第二篇
BOM-DOM-事件
欧气满满大顺顺的博客
04-04 1344
DOM简单学习 功能：控制html文档的内容 获取页面标签(元素)对象：Element document.getElementById(“id值”):通过元素的id获取元素对象 操作Element对象： 修改属性值： 明确获取的对象是哪一个？ 查看API文档，找其中有哪些属性可以设置 修改标签体内容： 属性：innerHTML 获取元素对象 使用innerHTML属性...
JavaScript之-文档对象模型
stray-heart的博客
11-15 289
文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操 作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端 Web 应用程序都必须使用 Java Applet 或 ActiveX 等复杂...
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成，具体指出了BOM（浏览器对象模型）和DOM（文档对象模型）。这两个模型是实现JavaScript功能的重要组成部分，而ECMAScript则是JavaScript的核心规范。 BOM主要涉及window对象...
教学进度表-Javascript程序设计.docx
12-16
JavaScript 的基础知识、JavaScript 的实现、JavaScript 小体验、JavaScript 环境搭建、JavaScript 类型、JavaScript 变量和关键字、条件语句、循环语句、函数、对象、BOM 基础函数对象、DOM 技术、CSS 基础、CSS ...
javascript bom是什么及bom和dom的区别
11-22
JavaScript BOM，全称Browser Object Model，即浏览器对象模型，它是JavaScript与浏览器进行交互的一系列对象的集合。BOM的核心对象是`window`，通过它，开发者可以操作浏览器窗口的各种特性，如改变窗口大小、位置...
JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（2）
weixin_43200099的博客
03-22 1550
Web APIs Web APIs和JS基础关联性 API和Web API API:应用程序编程接口 Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM） DOM DOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时… DOM树 DOM把以上内容都看作对象。 获取元素 ID、标签名、H5新方法、特殊 getElementByld()返回一个匹配的ID元素 getElementsByTagName(） 返回标签
2进制3位数过去现在将来输赢公式代码.txt
09-07
2进制3位数过去现在将来输赢公式代码
福州大学在广东2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-07
全国各大学在广东2021-2024各专业最低录取分数及位次表
WordPress 集网址、资源、资讯于一体的导航类主题开心版
09-07
WordPress 集网址、资源、资讯于一体的导航类主题开心版； 运行环境 PHP7.4 + MYSQL5.6
【Java学习】activemq消息中间件学习demo.zip
09-07
【Java学习】activemq消息中间件学习demo.zip 【Java学习】activemq消息中间件学习demo.zip 【Java学习】activemq消息中间件学习demo.zip
爬取淘宝热销(热门)手机支架商品信息公开透明的数据集
09-07
本资源专注于收集淘宝热销(热门)手机支架商品信息，内容涵盖商品的店铺所在省份、城市位置、商品的名称、销售价格、累积销量、单价（以人民币计价）、付款的顾客人数、是否提供包邮服务、是否为天猫平台的商品，以及相关的满减优惠情况。这些详细的数据点均来源于淘宝平台的公开透明信息，经过精确抓取和整理，旨在为分析电商平台上的新品推荐策略和消费者购买行为提供实用数据。 这些数据严格遵循淘宝平台的公开政策和隐私保护原则获取，确保了信息的合法性与合规性。然而，本资源仅作为学习参考之用，意在帮助研究人员、市场分析师或学生等理解电商领域的商品推荐机制、销售动态及市场趋势。 任何将此数据用于商业目的或其他未授权的活动都是不恰当的，甚至可能触犯相关法律条款。 在使用这些数据进行学术研究或个人学习时，用户应自觉遵守相关法律法规，尊重数据来源和版权，正确引用数据源，并不得用于任何形式的商业盈利。 注意：这是一份数据集
《深入理解JavaScript-ECMAScript、DOM和BOM》
JavaScript由ECMAScript（国际标准）、DOM（文档对象模型）和BOM（浏览器对象模型）三部分组成。 ECMAScript是JavaScript的核心，是一种由Ecma国际组织标准化的脚本语言规范。它定义了JavaScript的语法、基本数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值