JS无法获取div宽度

[兵工厂三剑客]

nav.js:

$(function(){
    // nav收缩展开
    $('.nav-item>a').on('click',function(){
        if (!$('.nav').hasClass('nav-mini')) {
            if ($(this).next().css('display') == "none") {
                //展开未展开
                $('.nav-item').children('ul').slideUp(300);
                $(this).next('ul').slideDown(300);
                $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
            }else{
                //收缩已展开
                $(this).next('ul').slideUp(300);
                $('.nav-item.nav-show').removeClass('nav-show');
            }
        }
    });
    //nav-mini切换
    $('#mini').on('click',function(){
        if (!$('.nav').hasClass('nav-mini')) {
            $('.nav-item.nav-show').removeClass('nav-show');
            $('.nav-item').children('ul').removeAttr('style');
            $('.nav').addClass('nav-mini');
            //收缩时,获取收缩前的宽度
            if (window.BarExpandedWidth==undefined){
                window.BarExpandedWidth=$('.nav-item>a')[0].clientWidth;
            }
        }else{
            $('.nav').removeClass('nav-mini');
            //展开时,获取展开前的宽度
            if (window.BarCollapseWidth==undefined){
                window.BarCollapseWidth=$('.nav-item>a')[0].clientWidth;
            }
        }
        var divNav=$('#mainFrameDiv');
        resetMainFrame();
    });
});

function resetMainFrame() {
    //获取左侧导航栏宽度
    var mainFrameDiv=$('#mainFrameDiv');
    var navDiv=$('#divNav');
    var divNavWidth=$('.nav-item>a')[0].clientWidth;
    //layer.msg(divNavWidth);
}

js文件里面无法获取控件的宽度。


但是jsp文件里面又可以。


这个地方又能获取到。

请问是怎么回事呢。

[___紫菜]

[0]换成eq(0)呢

[风中的少年]

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<div id="oDiv" style="width:300px">test</div>
<script>
 var oDiv = document.getElementById('oDiv');
 console.log(oDiv.style.width);
 console.log($('#oDiv').width());
// 设置了style的div是可以通过style.width属性获取（得到300px），也可能用jq的width方法获取(得到300)。
</script>

[兵工厂三剑客]

引用 2 楼 bbboy8205 的回复:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<div id="oDiv" style="width:300px">test</div>
<script>
 var oDiv = document.getElementById('oDiv');
 console.log(oDiv.style.width);
 console.log($('#oDiv').width());
// 设置了style的div是可以通过style.width属性获取（得到300px），也可能用jq的width方法获取(得到300)。
</script>

这种方法我试过了，在我这种情况下不行，但在某些时候是可以获取到width()的。我用了另外一种方式可以获取到：

var screenWidth = window.parent.document.body.clientWidth
var cueentBarWidth = $('.nav').width();
                window.parent.document.getElementById('mainFrameDiv').style.width = screenWidth - cueentBarWidth - 1 + "px";
                window.parent.document.getElementById('divNav').style.width = cueentBarWidth;
                window.parent.document.getElementById('main frame left').style.width = cueentBarWidth;

我也才学习，确定不了原因。我分析的是这样： 触发获取宽度的事件是在mainLeft.jsp里面，但是要获取的div控件是在main.jsp里面。而mainLeft.jsp我是嵌在main.left里面的，相当于子页面。所以得先取的window.parent。不能直接用$(''#divID‘’)这样取。 不知道我的分析正不正确。

[functionsub]

不在同一个document里，jq选择器没有找到元素。

[兵工厂三剑客]

引用 4 楼 functionsub 的回复:

不在同一个document里，jq选择器没有找到元素。

求问一下，概括来说，那如果事件是发生在子document，jq是不能直接作用在父document上么。

[functionsub]

引用 5 楼 SCGH_Fx 的回复:

[quote=引用 4 楼 functionsub 的回复:] 不在同一个document里，jq选择器没有找到元素。

求问一下，概括来说，那如果事件是发生在子document，jq是不能直接作用在父document上么。[/quote] jq只在引入的document中生效，每个iframe都有自己的document。 你3楼的分析是正确的。当然你3楼的代码是原生JS，没用用到jq。