Js中盒子模型的样式获取

最新推荐文章于 2022-04-06 20:50:24 发布
最新推荐文章于 2022-04-06 20:50:24 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ayiayi00/article/details/77880744
版权




可以使用几种方法实现浏览器的兼容的编写：





还是使用in的方法好一点点，因为判断getComputedStyle的方法是否存在与window中，直接返回true或者是false，而第二种方法还要根据返回的值转化为true或者false，这比较耗费浏览器的性能。

第三种方法是判断当前的浏览器类型，根据浏览器类型来判断采取那种方法（获取浏览器信息：window.navigator.userAgent）




把以上的获取盒子 模型样式的方法进行优化：



第二次改进：能获取某些浏览器不兼容的样式，比如是透明度：opacity(主流浏览器兼容)

透明度在ie6-8中不兼容，得使用滤镜来处理：filter:alpha(opacity:10)


AyiAyioo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子模型详解加示例
09-25
此外，使用JavaScript库如jQuery，可以通过`$.boxModel`属性检测当前页面是否遵循W3C标准盒子模型。如果返回`true`，则表示使用的是标准模型；若返回`false`，则可能使用的是IE模型。 在实际开发中，理解并熟练运用...
iframe js获取父级元素信息，设置css样式 和绑定事件
u011474272的博客
09-14 2162
获取iframe 父级id 为objid的内容。 $('#objid',window.parent.document).val(""); 初始化为iframe 父级 id为cancel1绑定事件 $('#cancel1',window.parent.document).bind('click', function(){ }); 设置iframe 父级class为.cover-pa
JS获取样式
n9nzjx57bf的博客
05-09 640
我们已经知道了JavaScript如果获取一个元素的内部样式，你可以这样做： var oBox = document.getElementById('box'); console.log(oBox.style.width); console.log(oBox.style.height); console.log(oBox.style.backgrou
菜鸟看前端（js获取盒模型）
weixin_45891146的博客
01-19 235
js获取盒模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #app{ width: 100px; height: 100px; border: 5px so
JS助记 ----- 盒子模型与获取元素样式
k909397116的博客
11-18 231
一、盒子模型简单介绍 content-box 默认的盒子模型，width 和 height 设置的是 content 的大小，有border和padding的情况下再额外增加盒子的宽高，整个盒子的大小由 border、padding、content 共同决定，border 和 padding 不会影响 content 的大小。 border-box 怪异盒子模型，width 和 height 设置的就是整个盒子的大小(除margin)，如果给元素设置 border 和 padding 就会挤压 conten
js 给某个div增加class 样式（三种方式）
热门推荐
`宝子的博客
05-03 5万+
js 给某个div增加class 样式（三种方式）
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
盒子模型
02-14
在JavaScript中，虽然盒子模型主要用于CSS，但有时候开发者可能需要通过JavaScript来获取或修改元素的盒子模型属性，例如元素的offsetWidth和offsetHeight属性可以获取元素的总宽度（包括边框和内边距），...
IE盒子模型和标准W3C盒子模型_资料收集
01-04
在CSS中存在两种主要的盒子模型：IE盒子模型（又称为怪异盒子模型）和标准W3C盒子模型。这两种模型对于元素的尺寸计算方式有所不同，了解这些差异对于确保网页在不同浏览器中的一致性显示至关重要。 #### 二、标准...
css盒子模型-京东快报
08-28
在这里，我们将深入探讨CSS盒子模型及其在实际应用中的运用。 **CSS盒子模型**是指每个HTML元素在网页中被渲染时，都会被看作一个矩形的盒子，这个盒子包含了元素的内容、内边距（padding）、边框（border）以及...
用javascript(js)实体化盒子（设置盒子样式）
qq_41485882的博客
08-12 3119
1、我们先写两个div的盒子，一个用css控制box01盒子的样式，用javascript(js)控制box02的盒子的样式。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt; /* 用css控
Js获取盒模型样式
如果有了可惜
04-22 290
在 JS 中，如果操作样式我们可能采取以下方式 获取 / 修改元素行内样式 [element].style | [element].style.xx = xx 添加 / 修改类名 [element].className = 'xx' | [element].classList[add|remove|toggle]() 但是我们发现通过 css 设置盒子的宽高并不能直接通过 js 的这几个 API...
Js中如何获取style标签中的left、top值
六仔的博客
02-19 2650
JS中如何获取style标签中的left、top值 使用offsetleft和offsettop 具体代码如下： var left = document.getElementById("dv").offsetLeft;//数字类型没有px
JS获取DOM的高度包括Padding margin border
xtaydwxf1988的专栏
04-21 1万+
var dom=document.getElementById('center'); var marginTop=getStyle(dom,'marginTop'); alert(parseInt(marginTop)); function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[a
块元素居中方式
gklcsdn的博客
12-10 795
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js实现：函数判断是否是闰年，计算面积和周长,两个整数相互交换，为盒子添加边框样式
m0_53881313的博客
04-06 551
-判断是否是闰年 // 用户输入一个年份，通过函数来判断输入的年份是闰年还是平年。 <script> var year = Number(prompt('请输入要判断的年份')); function leap(year) { if (year <= 100) { if (year % 4 == 0) { return '普通闰年'; ...
理解CSS盒子模型与网页样式
"该资源是一份关于HTML、CSS和JavaScript的PPT课件，主要讲解了盒子模型这一核心CSS概念，以及与HTML、CSS样式、JavaScript相关的一些基础知识。" 在Web开发中，盒子模型是理解CSS布局的关键。每个HTML元素都可以被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值