CODEWITHSUNDEEP
javascripthtmlcss
Gauthier
Gauthier

Reputation: 42025

Define new css class and access its members in javascript

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!
}

Upvotes: 0

Views: 96

Answers (3)

Mouni
Mouni

Reputation: 59

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.

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 3

Apetsi Ampiah
Apetsi Ampiah

Reputation: 73

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.

Upvotes: 0

Related Questions