Define new css class and access its members in javascript

Question

I am defining a css class, and trying to use its member from javascript. The result is undefined. Where is my mistake?

function myFunction() {
  var x = document.getElementById("myId").style.myMember;
  document.getElementById("debug").innerHTML = x;
}

.myClass {
  myMember: 123;
}

<p>Click the button to get the style property of the myId element.</p>

<button onclick="myFunction()">Try it</button>

<p id="debug"></p>

<div id="myId" class="myClass">
  My content.
</div>

The example at w3schools, if you want to try it.

Some background: I'm trying to create a very simple page with slideshow. I found out a way to create the slides in css thanks to w3schools (sorry, it's what comes out on top when I search).

Now I want to be able to set the display time separately for each slide in the html file, and this time to have a default value if it's omitted.

It seemed reasonable for display time to be part of the style of the slide, at least logical in my head. I understand now from the answers so far that the css styles can't be added to with custom attributes, is that correct?

What would be the correct way to pass a display time from this:

<div class="mySlides fade">
   <img src="img.jpg" style="width:100%">
</div>

to this javascript function?:

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 500); // Get display time from html instead!
}

I wouldn't refer to w3schools - loads of bad practices.. like this one xD — treyBake
– treyBake, Commented Mar 15, 2018 at 11:43
Are you confusing CSS classes and JS classes? CSS should only be used for styling really. — Andrew Bone
– Andrew Bone, Commented Mar 15, 2018 at 11:44
Its pretty unclear what you're trying to do, and why, can you elaborate? — StudioTime
– StudioTime, Commented Mar 15, 2018 at 11:45
No, if you run the example on w3c and click on the button, you'll also get undefined! Use CSS only for styling, what are you trying to do? — webta.st.ic
– webta.st.ic, Commented Mar 15, 2018 at 12:03
@Gauthier I think you're probably looking for this then developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… — Andrew Bone
– Andrew Bone, Commented Mar 15, 2018 at 14:12

Bhuwan · Accepted Answer · 2018-03-15 12:03:21Z

3

First of all element.style object will give you the style values which is defined inline in that particular element...

Second myMember is not an valid css property so it will give you nothing...

function myFunction() {
  var x = document.getElementById("myId").style.display;
  document.getElementById("debug").innerHTML = x;
}

<p>Click the button to get the style property of the myId element.</p>

<button onclick="myFunction()">Try it</button>

<p id="debug"></p>

<div id="myId" style="display:block">
  My content.
</div>

answered Mar 15, 2018 at 12:03

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gauthier Over a year ago

Oh, so css styles are not expandable?

Bhuwan Over a year ago

@Gauthier no they are not...however you can explore css variables if they fit in your requirement...Read this

Apetsi Ampiah · Accepted Answer · 2018-03-15 11:49:04Z

0

if you enter in the console "document.getElementById("myId").style", you get all the applicable styles to your given selection. the class "my123" is not recognised in there that's why you get the result as undefined.

answered Mar 15, 2018 at 11:49

Apetsi Ampiah

831 gold badge4 silver badges9 bronze badges

Comments

Mouni · Accepted Answer · 2018-03-15 12:12:11Z

0

You are trying to declare "myMember" as property and want to use it in Javascript but myMember is not a CSS property so its returning undefined.

The style property returns a CSSStyleDeclaration object, which represents an element's style attribute.

The style property is used to get or set a specific style of an element using different CSS properties.

edited Mar 15, 2018 at 12:12

answered Mar 15, 2018 at 12:02

Mouni

597 bronze badges

Collectives™ on Stack Overflow

Define new css class and access its members in javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related