[英]Check if div has margin auto
I have a div with margin auto, in the center (horizontal). 我在中心(水平)有一个带有margin auto的div。
I want to check with jQuery if the div has margin auto. 我想用jQuery检查div是否具有边距自动设置。
I tried to get the margin-left with .css()
. 我试图用
.css()
使页边空白。 Mozilla Firefox shows 0px, and Chrome shows a number of pixels... So with this method I cannot check if the div has margin auto... Mozilla Firefox显示0px,而Chrome显示许多像素...因此,使用这种方法,我无法检查div是否具有自动边距...
What I've tried: 我尝试过的
$( document ).ready(function() { $("#the_margin").append( $("#example").css("margin-left") ); }); // Check with Chrome and Firefox... // Firefox returns 0px, but Chrome returns a number of pixels
#example { margin: 0 auto 0; width: 300px; border: 1px solid #CCC; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="example"> Some Content </div> <div id="the_margin" style="font-weight: bold;"> The left margin is: </div>
What can I do? 我能做什么? Thanks a lot!
非常感谢!
EDIT 编辑
More clear: HOW CAN I CHECK IF DIV HAS MARGIN AUTO IN JQUERY? 更清楚:如果DIV是否有MARGIN AUTO在JQUERY中,该如何检查?
I think your problem Mozilla Firefox shows 0px, and Chrome shows a number of pixels can be fixed this way :-
我认为您的问题Mozilla Firefox显示0px,而Chrome显示许多像素可以通过以下方式解决:-
#example {
-webkit-margin: 0 auto 0;
-moz-margin: 0 auto 0;
width: 300px;
border: 1px solid #CCC;
}
You need to specify the browser while setting
margin
css 设置
margin
CSS时需要指定浏览器
i think the other way can be calculated. 我认为可以计算出另一种方式。
only top example for calculated margin-left value: 计算的左边距值的唯一顶部示例:
$('#example').offset().left - $('#example').position().left
$(document).ready(function() { $("#the_margin").append( $('#example').offset().left - $('#example').position().left ); });
#example { margin-top: 0; margin-left: auto; margin-right: auto; margin-bottom: 0; position: relative; width: 300px; border: 1px solid #CCC; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="example"> Some Content </div> <div id="the_margin" style="font-weight: bold;"> The left margin is: </div>
Created a function which reads the css and check the specified id if has margin with auto. 创建了一个读取css的函数,并检查指定的ID(如果具有自动裕度)。
JS (JQuery) JS(jQuery)
function check_center( the_id ) {
var result = "";
var sheets = document.styleSheets;
var attribute_style = $(the_id).attr( "style" );
if(attribute_style.match(/margin:([a-z0-9- ]+?)auto/) || attribute_style.match(/margin:auto/) || (attribute_style.match(/margin-left:auto/) && attribute_style.match(/margin-right:auto/)) || (attribute_style.match(/margin-left: auto/) && attribute_style.match(/margin-right: auto/)) ) {
result = "true";
} else {
the_id.matches = the_id.matches || the_id.webkitMatchesSelector || the_id.mozMatchesSelector || the_id.msMatchesSelector || the_id.oMatchesSelector;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (the_id.matches(rules[r].selectorText)) {
if(result != "true") {
if(rules[r].cssText.match(/margin:([a-z0-9- ]+?)auto/) || rules[r].cssText.match(/margin:auto/) || (rules[r].cssText.match(/margin-left:auto/) && rules[r].cssText.match(/margin-right:auto/)) || (rules[r].cssText.match(/margin-left: auto/) && rules[r].cssText.match(/margin-right: auto/)) ) {
result = "true";
} else {
result = "false";
}
}
}
}
}
}
if(result == "") {
result = "false";
}
return result;
}
$( document ).ready(function() {
$("#the_margin").append( check_center(document.getElementById('example')) );
});
HTML HTML
<div id="example" style="width: 300px;">
Some Content
</div>
<div id="the_margin" style="font-weight: bold;">
The div is centered?
</div>
CSS CSS
#example {
margin: 0 auto 0;
border: 1px solid #CCC;
}
Fiddle http://jsfiddle.net/vn6ajt6r/6/ 小提琴http://jsfiddle.net/vn6ajt6r/6/
It works for: 它适用于:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.