jquery 设置margin-top 刷新之后就失效了

jquery 设置margin-top 刷新之后就失效了,第1张

我觉得最大的可能是你用jquery设置的margin-top没有加单位的原因,其次也可能有$('.logo').height()-$('.logo_img').height()缺少数值类型转换的因素。

要加上单位,像下面这样:

<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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11132241.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-13
下一篇 2023-05-13

发表评论

登录后才能评论

评论列表(0条)

保存