Access element properties after page load

[john-cj]

Is it possible to get the element properties (background-color, height, and so on) after page load?

I have tried multiple ways, but for some reason none of them doesn't work:

// Shows rgba(0, 0, 0, 0)
$(document).ready(function() {
    var color = $('thead').css('background-color');
    alert(color);
});

// Alert window doesn't appears (no errors)
$(window).on('load', function() {
    var color = $('thead').css('background-color');
    alert(color);
});

// Shows rgba(0, 0, 0, 0)
var callback = function() {
    var color = $("thead").css("background-color");
    alert(color);
};
if (
    document.readyState === "complete" ||
    (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
    callback();
} else {
    document.addEventListener("DOMContentLoaded", callback);
}

If you made the changes in already opened file, these alerts will be correct: they will shos rgb(247, 248, 247). So, the only problem is that I can't understand why it does't work right after page load.

[mojavelinux]

var el = document.querySelector('thead') // or whatever you want to find
getComputedStyle(el).backgroundColor

[john-cj]

var el = document.querySelector('thead');
alert(getComputedStyle(el).backgroundColor);

It still shows rgba(0, 0, 0, 0)...

[mojavelinux]

Yes, that's black. The DOM always stores colors in rgba format.

[mojavelinux]

Yes, that's black.

Correction. It's transparent. Black would be rgba(0, 0, 0, 1).

[john-cj]

Well, the color was used just for example purposes. And it seems it was a bad idea.

Actually, I need to get the element height. This is required to finish the ad-hoc implementation of the idea I have posted yesterday: asciidoctor/asciidoctor#3391.

This is what I have tried:

alert($('thead').outerHeight());

var el = document.querySelector('thead');
var height = window.getComputedStyle(el).getPropertyValue('height');
alert(height);

var el = document.querySelector('thead');
alert(el.offsetHeight);

However, all these attempts, as well as attempts to use $(document).ready(function() { ... }); or $(window).on('load', function() { ... }); doesn't really work. The height is 44 pixels. The script shows 24 instead - which is the height calculated before CSS was applied. (If you use blank CSS instead of the default one, 24 will be the correct value.)

[mojavelinux]

I don't recommend using jQuery. It's just not needed and it makes it harder to understand what's going on.

To get the bounds of an element, I recommend using getBoundingClientRect(). It's very accurate, and works based on where the element is on the page, not where it is in the DOM.

var el = document.querySelector('thead');
var height = el.getBoundingClientRect().height

[john-cj]

Thanks, I will try to use getBoundingClientRect() here. Currently it doesn't work yet.

The only way which works for me currently is the setTimeout(). Of course, it should not be used here, not reliable.

setTimeout(function() {
    var el = document.querySelector('thead');
    var height = el.getBoundingClientRect().height;
    alert(height);
}, 500);

It is interesting that $(window).on('load', function () { ... }); doesn't fire.

$(window).on('load', function() {
     alert('Window loaded'); // Will not be shown. No error messages as well.
});

[ggrossetie]

It is interesting that $(window).on('load', function () { ... }); doesn't fire.

The browser will load the content (ie. a plain text AsciiDoc document) and then the extension will convert the document to HTML5 and replace the content on the page.
That's why the event won't be triggered because the page has already been loaded.

[john-cj]

@Mogztter So, it seems that setTimeout() is the only way to deal with it?

[ggrossetie]

We could try to use the executeScript API but I'm not sure when the code will be executed.

setTimeout seems fragile but for now I think it's the least worst solution.

Maybe the extension could send a message to notify the page is "ready" (ie. the content of the page has been replaced) using: https://developer.chrome.com/extensions/messaging (not sure

[mojavelinux]

I understand what the underlying issue is now. Guillaume, could the extension fire a custom event once it's done?

[AXGKl]

Maybe via the observer api?
This works to change the page title, run in a prerender script:

    var targetNode = document.querySelector('body')
    var observerOptions = {
        childList: true,
        attributes: false,
        subtree: true, //Omit or set to false to observe only changes to the parent node.
    }
    function callback(ml, observer) {
        let c = document.getElementById('content')
        if (window.mutated || !c) return
        window.mutated = true
        c.firstChild.innerText = 'New Title'
    }
    var observer = new MutationObserver(callback)
    observer.observe(targetNode, observerOptions)

You could also e.g. wait for the toc and change it around.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver

---

Edit: Problem still: You don't know without polling when the rendering is finished. => Maybe useful - but only for a restricted number of use cases, like the one in the example.