Whenever I define a css class and attempt to access its member from JavaScript, the result always ends up being undefined. Where could my mistake possibly lie?
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>If you wish to experiment with this concept, here's an example available on w3schools.
Providing some context: I'm currently working on a minimalist slideshow page design. Following guidance from w3schools (yes, I realize it's quite mainstream), I've managed to create the slides in CSS.
My objective now is to set different display times for each slide within the HTML file while having a default value in case any time entry is omitted.
In my mind, incorporating the display time into the style of the slide seemed to be a logical approach. However, based on the responses received so far, it appears that custom attributes cannot be appended to CSS styles. Is that understanding accurate?
What would be the correct method to transfer a display time from this HTML snippet:
<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); // Retrieve display time from HTML instead!
}