从 Javascript 检测真实的边框、填充和边距

发布于 2024-07-10 03:03:58 字数 1354 浏览 5 评论 0原文

有没有办法从 Javascript 代码中检测元素的真实边框、填充和边距？如果您查看以下代码：

<html>
    <head>
        <style>
        <!--
        .some_class {
            padding-left: 2px;
            border: 2px solid green;
        }   
        -->
        </style>
        <script>
        <!--
        function showDetails()
        {
            var elem = document.getElementById("my_div");
            alert("elem.className=" + elem.className);
            alert("elem.style.padding=" + elem.style.padding);
            alert("elem.style.paddingLeft=" + elem.style.paddingLeft);
            alert("elem.style.margin=" + elem.style.margin);
            alert("elem.style.marginLeft=" + elem.style.marginLeft);
            alert("elem.style.border=" + elem.style.border);
            alert("elem.style.borderLeft=" + elem.style.borderLeft);
        }
        -->
        </script>
    </head>
    <body>
        <div id="my_div" class="some_class" style="width: 300px; height: 300px; margin-left: 4px;">
            some text here
        </div>
        <button onclick="showDetails();">show details</button>
    </body>
</html>

您可以看到，如果单击该按钮，填充的报告不正确。仅报告直接通过“style”定义的属性，不报告通过 CSS 类定义的属性。

有没有办法取回这些属性的最终值？我的意思是浏览器计算并应用所有 CSS 设置后获得的值。

原文

Is there a way to detect the true border, padding and margin of elements from Javascript code? If you look at the following code:

<html>
    <head>
        <style>
        <!--
        .some_class {
            padding-left: 2px;
            border: 2px solid green;
        }   
        -->
        </style>
        <script>
        <!--
        function showDetails()
        {
            var elem = document.getElementById("my_div");
            alert("elem.className=" + elem.className);
            alert("elem.style.padding=" + elem.style.padding);
            alert("elem.style.paddingLeft=" + elem.style.paddingLeft);
            alert("elem.style.margin=" + elem.style.margin);
            alert("elem.style.marginLeft=" + elem.style.marginLeft);
            alert("elem.style.border=" + elem.style.border);
            alert("elem.style.borderLeft=" + elem.style.borderLeft);
        }
        -->
        </script>
    </head>
    <body>
        <div id="my_div" class="some_class" style="width: 300px; height: 300px; margin-left: 4px;">
            some text here
        </div>
        <button onclick="showDetails();">show details</button>
    </body>
</html>

you can see, if you click the button, that the padding is not reported right. Only the properties defined directly through "style" are reported back, those defined through a CSS class are not reported.

Is there a way to get back the final values of these properties? I mean the values obtained after all CSS settings are computed and applied by the browser.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴意少年 2024-07-17 03:03:59

style 属性可以获取内联分配的样式，如

test
< /代码>
如果您想获取外部 css 文件或

var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);

如果您使用的是 jQuery，@vsync 的解决方案就很好。

the style property can get the styles that are assigned inline like

<div id="target" style="color:#ddd;margin:10px">test</div>
if you want to get the styles assigned in outer css file or <style/> element, try this:

var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);

if you are using jQuery, @vsync 's solution is fine.

回复收藏 0 原文

拍不死你 2024-07-17 03:03:59

使用 jQuery：

var $elm = $('.box');
var hPadding = $elm.outerWidth() - $elm.width();
var vPadding = $elm.outerHeight() - $elm.height();
var hBorder = $elm.outerWidth() - $elm.innerWidth();
var vBorder = $elm.outerHeight() - $elm.innerHeight();

console.log("Horizontal padding & border: ", hPadding);
console.log("Vertical padding & border: ", vPadding);
console.log("Horizontal border: ", hBorder);
console.log("Vertical border: ", vBorder);

.box{ 
  width: 50%;
  padding:10vw; 
  border:10px solid red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

你的方式（但你必须声明 paddingLeft、paddingRight..而不仅仅是 'padding' ）：

var elm = $('.box');
console.log("padding left (PX): ", elm.css("paddingLeft"));

.box { 
  padding:0 50px 0 5vw; 
  border: 2px solid green; 
  width: 300px; 
  height: 300px; 
  margin-left: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">some text here</div>

With jQuery:

var $elm = $('.box');
var hPadding = $elm.outerWidth() - $elm.width();
var vPadding = $elm.outerHeight() - $elm.height();
var hBorder = $elm.outerWidth() - $elm.innerWidth();
var vBorder = $elm.outerHeight() - $elm.innerHeight();

console.log("Horizontal padding & border: ", hPadding);
console.log("Vertical padding & border: ", vPadding);
console.log("Horizontal border: ", hBorder);
console.log("Vertical border: ", vBorder);

.box{ 
  width: 50%;
  padding:10vw; 
  border:10px solid red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

Your way (but you have to state paddingLeft, paddingRight..not just 'padding' ):

var elm = $('.box');
console.log("padding left (PX): ", elm.css("paddingLeft"));

.box { 
  padding:0 50px 0 5vw; 
  border: 2px solid green; 
  width: 300px; 
  height: 300px; 
  margin-left: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">some text here</div>

回复收藏 0 原文

痴情 2024-07-17 03:03:59

这是可能的，但当然，每个浏览器都有自己的实现。幸运的是，PPK 为我们完成了所有艰苦的工作：

http://www.quirksmode.org/dom /getstyles.html

回复收藏 0 原文

~没有更多了~

关于作者

深者入戏

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

从 Javascript 检测真实的边框、填充和边距

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

使用 jQuery：

With jQuery:

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

从 Javascript 检测真实的边框、填充和边距

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

使用 jQuery：

With jQuery:

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。