201807问题总结

根据clientX等鼠标位置对元素进行定位使用absolute会发生变化

项目: 《os>
时间: 2018年7月30日
问题: 根据clientX等鼠标位置对元素进行定位使用了absolute,导致当屏幕大小(或文档长宽)发生变化时,位置也会发生变化
分析: 此处一开始用position定位,但position:absolute是根据设置了relative的父元素进行定位的,所以当屏幕大小(如果存在滚动内容,absolute是根据父元素进行定位)发生变化时,位置也会发生变化
浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条,而position:fixed属性也是设置元素在当前可视窗口的位置,所以如果想根据鼠标位置定位元素应当使用fixed属性

使用$(selector).width()获取元素宽度结果是null

项目: 《os》
时间: 2018730日
问题: 使用$(selector).width()获取元素宽度结果是null
分析: 在获取文字提示框之前,一开始尝试设置好appendHtml后直接获取元素宽度,但这样获取的width值为null,这是因为找不到要获取宽度的元素,即找不到.box元素,因为还没有添加到Html中……
解决办法: 在append语句后再获取元素宽度然后重新给元素赋值
正确代码: 
  $('body').append(appendHtml)
  var w = $('.box').outerWidth()

使用css()方法给元素重新加left和top值时不起作用

项目: 《os>
时间: 2018730日
问题: 使用css()方法给元素重新加left和top值时不起作用
分析: 一开始我以为是不能使用css()方法为元素定位时的left和top赋值,后来打印发现left是'NANpx',是因为我使用了之前设置的x值直接进行加减的运算,但x值是我经过字符串拼接后的值……
解决办法: 直接使用clientX值
问题代码: 
  var x = oEvent.clientX - 50 + 'px'
  var w = $('.box').outerWidth()
    var x1 = x - w / 2 + 'px' // x1值为NANpx
    $('.tip').css({
      'position': 'fixed',
      'left': x1,
      'top': y,
      'z-index': 9000,
    })

猜你喜欢

转载自blog.csdn.net/weixin_38318244/article/details/81333168