为什么jquery getter css()方法和javascript返回不同的样式变量值

why do jquery getter css() method and javascript return different values for style variable

本文关键字：返回 变量值 样式 javascript getter jquery css 方法 为什么      更新时间：2023-09-26

我刚开始使用jquery，我认为这将是明智的做切换，由于各种初始化问题，我正面临与javascript加载外部样式。总之，我在一个外部样式表

中定义了这个规则
#siteLogoDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100px;
color: white;
background-repeat: no-repeat;
z-index:4;
font-family: 'Courier New',Courier,monospace;
background-color: #006600;
}
#userdiv {
   position:absolute;
   left:72%;
   top:1%;
   width:17%;
   height:24px;
   z-index:1;
   font-weight: bolder;
   font-size: 12px;
   color:gold;
 }

我尝试像这样访问样式表中的left属性:

var left = window.getComputedStyle(element, null).getPropertyValue('left');
alert('with no libs, left = '+left);// returned 971.265625px
left = $('div').css('left');
alert('with jquery lib, left = '+left);//returned 310.265625px

我得到了两个不同的答案，使用jquery，我得到了310.265625px，没有使用库，我得到971.265625像素。我把两个数字都加起来，得到1281.53125，这可能是指屏幕设置。所以在jquery和纯javascript(没有库)中，left属性以不同的方式测量。也许是在屏幕的两端?

<div id="siteLogoDiv">
<img id="sitenameid"   name="sitename" src='' alt="" >
<p id= 'userdiv' 
 onmouseover="this.style.opacity='0.5'; var div =  
 this;alert(this.id);createList(div,new    
 Array
('Home','About Us','Bookworm Forum','Go to Practice Exams','Logout','Account    
 Settings','A','B','C','D','E','F','G','H'),
    new      
  Array('../jsp/home.jsp','#','../jsp/chatforum.jsp',
'../jsp/exampage.jsp','../LogoutServlet'     ,'javascript:sendLogoutMessage();'
    ,'#','#','#','#','#','#','#','#'),'15%','20px',
            'yellow','silver','blue',2);" onmouseout="this.style.opacity = '1.0'"   
 ><%= "Welcome! "+email %>  </p> 
 <img src='' alt='../images/default_user_image.jpg' name='avatar' id='avatarid' 
 onmouseout="shrinkImageBySubtractor('avatarid', 50, 50);"       
 onmouseover="zoomImageByAdder('avatarid', 50, 50);" >

</div>
下面是createList函数的代码: 
function createList(element,values,links, 
width,cellHeight,fgColor,bgColor,linesColor,position){
var $a = $('div'); 

var left = window.getComputedStyle(element, null).getPropertyValue('left');
alert('with no libs, left = '+left);// returned 971.265625px
left = $a.css('left');
alert('with jquery lib, left = '+left);//returned 310.265625px

var top = window.getComputedStyle(element, null).getPropertyValue('top');
alert('with no libs, top = '+top);// returned 971.265625px 
    left = $a.css('top');
alert('with jquery lib, top = '+top);//returned 310.265625px
//Other irrelevant code
      }

您没有引用相同的元素。设置element为this, this为鼠标悬停的<p>元素，即。你的#userdiv元素(<p>标签的奇怪ID…)

然而，你的jQuery正在使用$('div')，寻找"所有<div>元素"，CSS getter返回第一个这样的元素的值。

尝试$("#userdiv")甚至$(element)，您应该看到相同的数字

是不同的东西，jQueries css()函数返回css属性的值。还有。getpropertyvalue ('left');Of javascript返回元素的实际位置。解释一下:

    <style>  
    .container {margin: 0 auto;position:relative}
    .elem {position:absolute; top:0; left:200px}
    </style>
    <body>
       <div class="container"> <div class="elem"></div>
    </div>
    </body>

根据窗口的大小getPropertyValue('left')函数将改变其返回值，因为.container具有自动页边距。

但是css("left")总是200px

相关文章：