javascript - $(li).width() 返回值包括填充?

标签 javascript jquery css width

http://jsfiddle.net/MeoMix/8zg2V/83/

我有以下 jsFiddle。这个想法是,当显示太长的上下文菜单项时,它会以省略号呈现,但在鼠标悬停时它会平移文本。

有问题的代码:

//Provides helper methods for non-specific functionality.
define('helpers', [], function () {
    'use strict';

    return {
        scrollElementInsideParent: function(element, parent) {
            //  Scroll the element if its too long to read.
            $(element).mouseover(function () {

                var distanceToMove = $(this).width() - $(parent).width();

                console.log("My width and parent width:", $(this).width(), $(parent).width());

                $(this).animate({
                    marginLeft: "-" + distanceToMove + "px"
                }, {
                    //  Just a feel good value; scales as the text gets longer
                    duration: 15 * distanceToMove,
                    easing: 'linear'
                });

            }).mouseout(function () {
                $(this).stop(true).animate({ marginLeft: 0 });
            });
        }
    };

在这里,我记录了被滚动的元素的宽度及其父元素的宽度。控制台输出:

My width and parent width: 360 230

但是从指标来看这似乎是不正确的:

enter image description here

这是为什么?

最佳答案

在您的代码中,parent参数指的是<ul> .使用 $(this).parent()得到<li>

演示: http://jsfiddle.net/EsL2X/

关于javascript - $(li).width() 返回值包括填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17728411/

相关文章:

html - 如何在移动设备中显示与桌面相同的 bootstrap 4 卡结构?

javascript - 匹配 JavaScript 数组中的值

javascript - 如何自动随机化 46 个名称以在 Google 表格中创建 46 x 6 唯一行和列?

jquery - 如何为 select2 添加占位符?

javascript - 使用 Ajax 发送数据而不发送到 PHP

javascript - 从头开始重新创建 slick js 响应中心模式

css - 如何将我的导航栏固定到页面顶部

javascript - 数据绑定(bind)属性的更改不会向上传播

javascript - 将 PHP 变量作为函数值调用

javascript - 带参数的jquery函数