Assign an html id to a sass variable as value-CodePudding

I am pretty new to web development, so if you don't understand the explanation of my question, pls let me know. In my html File I have multiple divs with the same classname which are also defined by an unique id.

<div  id="130" >
<div  id="240" >
<div  id="15" >
<div  id="870" >
<div  id="640" >

Now I want to hand the id over to my sass file, and assign the id as a value to a variable. So at the end I want have the id name as my timer length. Like so:

$timer_length: 130

This way I want to manage the timer length of multiple individual timers. I don't know if this is even possible. Maybe there is a simple way to do this.

CodePudding user response：

You can try something like this not sure about this will help you or not.

If you know how many individuals are then you can give them a dynamic name something like example_1 where example_ and 1 is static with that you can fetch a specific individual's id then you can use with the help of JavaScript as @Noam said in the comments.

var dynamic_number = 2;
var elm_name = "example_"  dynamic_number;
console.log(elm_name);
var elements = document.getElementsByName( elm_name );
var value = elements[0].getAttribute( 'id' );
alert("Time for individule "   dynamic_number  " is: "  value);

<div  name="example_1" id="130" >
<div  name="example_2" id="240" >
<div  name="example_3" id="15" >
<div  name="example_4" id="870" >
<div  name="example_5" id="640" >

CodePudding user response：

There is an attr property that you can use in css, but according to CanIUse, it's currently only supported for the content attribute. You may need to use JavaScript to do what you want.

Since you seems to use your IDs as a data, I suggest you to use data-[...]. Here is an example with your IDs as data-length to set up div length :

let examples = document.getElementsByClassName("example");
for (let i = 0; i < examples.length; i  ) {
  examples[i].style.width = examples[i].dataset.length "px";
}

.example{
  height:10px;
  background-color:orange;
  margin-bottom:10px;
}

<div  data-length="130"></div>
<div  data-length="240"></div>
<div  data-length="15" ></div>
<div  data-length="870"></div>
<div  data-length="640"></div>