Cannot Return CSS Property of HTML Element

cannot return css property of HTML element

You can use getComputedStyle:

var value = window.getComputedStyle(document.getElementById('block')).getPropertyValue("background-color");
console.log(value);

Cant get CSS property from child?

Couple of issues there.

getPropertyCSSValue is obsolete and may not work in browsers anymore
id is a selector, not a valid css property

Use getPropertyValue instead,

var message = style.getPropertyCSSValue("background");

Demo

var style = window.getComputedStyle(document.getElementById("ctr").children[1])var message = style.getPropertyValue("background");
console.log("CSS Value is  : " + message)

<div id="ctr" class="faden-slider-container">  <div class="conteneur-image"></div>  <div class="conteneur-image"></div>  <div class="conteneur-image"></div></div>

Why am I not able to access CSS properties with JavaScript?

Combining comments and answers from others. For details you can refer those.

Two changes to be done to make it working

Add Border Style: border-top-style: solid;
Modify JS code to get the border color: alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);

 <!DOCTYPE html>   <html>   <meta charset="UTF-8">   <head>   <style>   div   {      border-top-width: 15px;      border-top-color: green;      border-top-style: solid;   }   </style>   </head>   <body>   <div id="myDiv">This is a div.</div>   <br>   <button type="button" onclick="myFunction()">Return top border color</button>   <script>   function myFunction() {           alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);        }   </script>   </body>   </html>

Why can't I retrieve a CSS style property for an element using JS?

Check this link: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

const nav = document.querySelector("nav");const { color: classStyle } = getComputedStyle(nav);const { color: inlineStyle } = nav.style;

console.log(inlineStyle)console.log(classStyle)

nav  {  color: red;}

<nav>this is nav</nav>

Jquery, cannot access css properties of dynamically generated element

It does seem to be a compatibility question, although I wasn't able to figure out exactly why and how to fix it.
Adding this code fixes the problem though:

jQuery.curCSS = function(element, prop, val) {
  return jQuery(element).css(prop, val);
};

Why element.style always return empty in JS?

element.style returns the inline style used in html document and since the style is not set directly in html you will get and empty value

What you are looking for is the computedStyle which will returns the style that is applied to the element

console.log(window.getComputedStyle(document.getElementById('test')).display)

#map {      display: block;      align-content:center;    }

<div id="test">test</div>

How to reset/remove CSS styles for a specific element or selector only

The CSS property all has a keyword initial that sets the CSS property to the initial value as defined in the spec. The all keyword has broad browser support except for the IE and Opera Mini families.

/* basic modern patch */

#reset-this-root {
    all: unset;
}

#reset-this-root {
    all: initial;
}

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

Relevant GitHub repo with a December 2017 more exhaustive list
Related
Related from MDN
Related W3C specs

With all this said, I don't think a CSS reset is something feasible unless we end up with only one web browser, if the 'default' is set by browser in the end.

why are initial CSS styles not visible on DOM element.style field?

The HTMLElement.style property is not useful for completely
learning about the styles applied on the element, since it represents
only the CSS declarations set in the element's inline style
attribute, not those that come from style rules elsewhere, such as
style rules in the section, or external style sheets. To get
the values of all CSS properties for an element you should use
Window.getComputedStyle() instead.

Via- MDN Web Docs | Getting Style
Information

HTMLElement.style:

The HTMLElement.style property is used to get as well as set the inline style of an element.

console.log(document.getElementById("para").style.fontSize); // will work since the "font-size" property is set inlineconsole.log(document.getElementById("para").style.color); // will not work since the "color" property is not set inline

#para {color: rgb(34, 34, 34);}

<p id="para" style="font-size: 20px;">Hello</p>

Cannot Return CSS Property of HTML Element