Question

我需要使用一些数据，由JS计算（例如：窗口大小）作为某些HTML元素的css属性。为了避免因布局变化而导致窗口闪烁，我无法使用document.onready。我实际上需要在DOM元素添加到DOM树时触发JS函数。

我尝试使用DOMNodeInserted事件，但似乎只触发了使用JavaScript加载HTML代码后添加的元素。

我需要的是更改页面原始HTML源代码中显示的标记。所以现在我只是在必须更改标记的HTML代码之后内联JavaScript，但是有一种方法可以在每个这样的标记之后没有内联JS。像DOMNodeInserted之类的东西，但在渲染原始HTML时触发。或者我还能做到这一点 - 拥有一个JS依赖的布局，它在加载后不会移动（它在向用户显示之前正确生成）并且页面中仍然有HTML代码（例如，不完全从JavaScript生成页面）？

更新这是用于调整图像大小的javascript。它尊重宽度和高度，而宽度：100％或高度：100％有效，除非窗口宽度/高度不小于图像本身。

function resizeImg() {
    var imgwidth = bgImg.width();
    var imgheight = bgImg.height();

    var winwidth = $(window).width();
    var winheight = $(window).height();

    var imgratio = imgwidth / imgheight;

    imgwidth = winwidth;
    imgheight = winwidth / imgratio;


    if (imgheight < winheight) { 
        imgheight = winheight;
        imgwidth = imgheight * imgratio;
    }

    $('.cover-image').css({
        width: winwidth+'px',
        height: winheight+'px'
    });
}

Answer 1

您可以使用脚本撰写样式表，并在正文渲染之前将其添加到头部的新样式元素上。

或者您可以在样式表中使用媒体查询，并将您喜欢的样式应用于不同的窗口或设备尺寸。

如何在仍在加载的情况下更改原始HTML

1 个答案: