要加上单位,像下面这样:
<script>
$(document).ready( function (){
$('.logo_img').css({
'margin-top':(($('.logo').height()-$('.logo_img').height())/2) + 'px'
})
})
</script>
保险起见的话,再加上类型转换:
<script>
$(document).ready( function (){
$('.logo_img').css({
'margin-top':((parseFloat($('.logo').height())-parseFloat($('.logo_img').height()))/2) + 'px'
})
})
</script>
还有,如果这个元素在页面中是唯一的,本人还是推荐用id去获取元素,这样用js选择器取值时也会更直接快速,保持良好的代码书写习惯,很重要。
获取padding方法如下:$(document).ready(function () {
var $h1 = $('h1')
console.log($h1)
$h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'))
$h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'))
})
获取margin方法如下
var margT = jQuery(this).css('margin')
css中padding和margin的区别
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
你这种需求,只能通过判断鼠标的位置了,当鼠标进入的位置处于这两者之间的共同区域时,触发事件。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<script src="http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<title>Div MouseOver</title>
</head>
<body>
<div id="div1" style="width:600pxheight:600pxbackground-color:#ff0">
<div id="div2" style="width:300pxheight:300pxbackground-color:#f00margin:100pxdisplay:inline-block">
</div>
<script>
var $=function(obj){
return document.querySelector(obj)
}
$('div').addEventListener('mouseover',function(e,s){
if(e.offsetX<100&&e.offsetY<600||e.offsetX>400&&e.offsetY<600||e.offsetX>0&&e.offsetY<100||e.offsetX>0&&e.offsetY>400) console.log("X:",e.offsetX, "Y:",e.offsetY)
else console.log('不在区域内')
})
</script>
</div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)