Getting CSS Styles with JavaScript - getComputedStyle() function

Рет қаралды 20,358

5 жыл бұрын

In this video we are going to take a look at how to use the window.getComputedStyle() function/method in JavaScript to get the computed CSS styles of an HTML element.
Computed Styles are not taken directly from the stylesheet itself but represent the "computed" version of a value. For example, a CSS value of "100%" has a computed value of [number]px.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozilla.org/en-US/d...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#javascript #css #dcode

Пікірлер: 22

@theoligarchist1503 4 жыл бұрын

wow , ~nice large readable font, NICE WORK~

@mr.webdev3700 5 жыл бұрын

Nice video! Thanks!

@yannik8271 2 жыл бұрын

Great explanation. Thank u!

@cleytonalves6324 2 жыл бұрын

Thanks a lot. I learn more English and JavaScript. Your dyadic is very interesting!

@tejkumarkempaiah4906 2 жыл бұрын

Thank you, This is one of the best videos I have come across.. Do you provide online training on JavaScript ?

@tejkumarkempaiah4906 2 жыл бұрын

Is there way to convert a color we derive using window.window.getComputedStyle(color) of an HTML element like red, yellow, green.. ? Thanks in advance for all your effort, Love from India ❤️ Example: var h1_ele = document.getElementById('heading'); var h1_ele_css_details = window.getComputedStyle(h1_ele); console.log(h1_ele_css_details.color); output: rgb(30, 144, 255) Help needed: I want direct color name to be displayed on the console. Is there a way to achieve it?

@papanos14 4 жыл бұрын

Thank you for the video, great job! I have a question. If you get the value of the width for example and you want to add on this something (for example from 40px to make it 50px) how do you do it ? [But not to change it from 40 to 50, to add 10 more px instead)

@ainbrisk545 4 жыл бұрын

You can do something like this: var myVariable = window.getComputedStyle(document.getElementById('ElementIDHere')).width += 10; That would probably work... I think. Haven't tried it.

@baladimirputin708 Жыл бұрын

Love From India ❣

@DanielWayota 5 жыл бұрын

Very interesting! By the way, what VSCode color scheme are you using?

@dcode-software 5 жыл бұрын

Hey, I'm using Min Dark.

@DanielWayota 5 жыл бұрын

@@dcode-software Thanks!

@teoh996 Ай бұрын

Hello dcode. When I use computer style to get img width for an image whose src is an online link it works right. But for the same exact image, when I download it and then I use the get computed style method on that same image who’s src now is local to my pc, I get 0px. Any ideas why that is happening?