个人中心
gpt4 book ai didi

javascript - jQuery.width() 返回百分比宽度而不是像素宽度

转载 作者：行者123 更新时间：2023-11-29 18:05:35 24 4
gpt4 key购买 nike

请查看以下 2 个 jsFiddle 示例:

示例编号 1

第一个是纯 html 和对 Jquery 宽度函数的一次调用，然后返回预期的宽度(以像素为单位)。
Demo with pure HTML

HTML:

<body class="ui-mobile-viewport ui-overlay-a" data-pinterest-extension-installed="cr1.38.2" style="background-color: rgb(255, 182, 50);">
    <div data-role="page" data-theme="b" id="mailiPage" style="">
        <div id="mainDiv" data-role="content" class="ui-content" data-theme="b" style="text-align:center;background-color:#ffb632;background-image:none;height:100%">
            <div class="ui-grid-b">
                <div id="left" class="ui-block-a" style="width:5%;"></div>
                <div id="center" class="ui-block-b" style="width:90%;"></div>
                <div id="right" class="ui-block-c" style="width:5%;"></div>        
            </div>
        </div>
    </div>    
</body>

JavaScript:

alert('this width of the center div is in pixels: ' + $('#center').width() + '\n');

示例编号 2

第二个示例包括用于动态编写 html 的 javascript，而不是对 width 函数的调用，在这种情况下返回百分比值而不是像素宽度。
Demo with only Javascript

JavaScript:

var strPage = ""
var leftSideColumnsWidth = 5;
var rightSideColumnsWidth = 5;
var centerColumnsWidth = 90;
$("body").empty();
strPage = strPage + "<div data-role='page' data-theme='b' id='mailiPage' style=''>"
strPage = strPage +     "<div id='mainDiv' data-role='content' class='ui-content' data-theme='b' style='text-align:center;background-color:#ffb632;background-image:none;height:100%'>" //padding-top: 56px;'>"
strPage = strPage +         "<div class='ui-grid-b'>" 
strPage = strPage +             "<div id='left' class='ui-block-a' style='width:" + leftSideColumnsWidth + "%;'>"
strPage = strPage +             "</div>"
strPage = strPage +             "<div id='center' class='ui-block-b' style='width:" + centerColumnsWidth + "%;'>"
strPage = strPage +             "</div>"
strPage = strPage +             "<div id='right' class='ui-block-c' style='width:" + rightSideColumnsWidth + "%;'>"
strPage = strPage +             "</div>"
strPage = strPage +         "</div>"
strPage = strPage +     "</div>"
strPage = strPage + "</div>" 

$("body").append(strPage);

alert('this width of the center div is not in pixels but in percentage: ' +$('#center').width()+'\n');

知道为什么会延迟吗？

更新:

在动态版本中，如果您标记出定义 JQM 页面的第一个 div 并包含“data-role='page'”，则 width 函数将返回以像素为单位的值!!现在的问题是为什么？

最佳答案

jQuery Mobile 页面，即带有 [data-role=page] 的 div 元素最初是隐藏的。对于隐藏元素:

The value reported by .width() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .width(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

话虽如此，您可能想要 look at this example ，它 Hook pageshow 事件以确定页面(以及元素)是否可见。

关于javascript - jQuery.width() 返回百分比宽度而不是像素宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31537222/

24 4 0
文章推荐： javascript - 使输入字段的一部分不可编辑
文章推荐： jquery - 如何使用 jQuery 根据所选选项显示和隐藏元素？
文章推荐： php - 使用 Codeigniter 中的最后插入 ID 生成唯一的代码？
文章推荐： android - 我需要从图像创建布局
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com