DEV Community: Erhie

how to get height of div in pixels?

Erhie — Mon, 17 Oct 2022 17:42:47 +0000

Hello!
For a DIV with variable text I hoped to get the height in pixels with the function getComputedStyle, but it delivers auto also if I delay the detection.
Has you a suggestion how to fix it ?
my javascript code snippet:

this.slInfDetail = this.slInfo.appendChild( document.createElement('div') );
s = this.slInfDetail.style;
s.position = "relative";
s.fontSize = `calc(${fontsize} / 2.5 )`
s.textAlign = "left";
s.backgroundColor = "rgba(0,0,0,0.35)";
s.color = "rgb(255,255,255)"
s.zIndex = 999;
this.slInfDetail.innerHTML = "Additional info comes<br>here";
this.slInfComputedHeight;
setTimeout(() => {
    let sComputed = getComputedStyle(this.slInfDetail);
    this.slInfComputedHeight = sComputed.height; // is 'auto' 
});

XOR color in stacked div ?

Erhie — Mon, 17 Oct 2022 13:12:24 +0000

Hello!
I want to display a info box with follows the mouse position.
I have defined the background color transparent.
Sometimes the text is not identifiably because the subjacent element has the same color.
Do you know a method or property that the color change dynamically?
Perhaps that the color is XOR of the color of the subjacent element.

Thank you for tips
Erhie

sequence of parameters with bind()

Erhie — Mon, 10 Oct 2022 12:49:24 +0000

I try to put some html element object in a class und
write addEventListener which should work for all instances.

I found a solution, but I don´t understand it.
eg.

class ValueSlider extends HTMLDivElement {
    constructor() {
        .  .  .
        this.startDrag = function(el, evt) {
            let thisNow = this; // class object
            let element = el; // mySvg object
            let event = evt; // event object
            .  .  .
        }

        this.evHandler = this.startDrag.bind(this, this.mySvg);

        this.mySvg.addEventListener("mousedown", this.evHandler );
    }
}

Why the function receives the event object as last parameter ?

Thank you for discussion
Erhie