Question 44099 in Html Question posted in
Some basic documentation can be found here.

How to get style from div into js? – Html

I have a div (the styles are made by another js script). I want to get the values of --rows and --columns into another JS file. When I output them to the console it just outputs "". What is wrong?

const rowscolumns = document.getElementById('sliderh')

var rows = rowscolumns.style.getPropertyValue("--rows")
var columns = rowscolumns.style.getPropertyValue("--columns")

console.log(rows)
<div id="sliderh" class="slider_box" style="--relative_pos:46.5px; --rows:7; --columns:5;">
  ...
</div>

Ok here is the other js script that ads the style elements:

function relcalch() {
let relPos2 = (valueh * Stepsh) / hWidth * 100
elementh.style.setProperty("--relative_pos",`${relPos2}%`)
elementh.style.setProperty("--rows",`${valueh + 3}`)
elementh.style.setProperty("--columns",`${valuew + 3}`)
texth.innerHTML = valueh +3
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have figured out that I was doing a really stupid thing in the first place: My code now is using data, not style (for rows and columns):

    First the html:

    <div id="sliderh" class="slider_box" data-rows="5" data-columns="6">
   <div class="slider_ind"></div>
</div>

    Now setting the data:

    function relcalch() {
    let relPos2 = (valueh * Stepsh) / hWidth * 100
    elementh.style.setProperty("--relative_pos",`${relPos2}%`)
    elementh.dataset.rows = `${valueh + 3}`
    elementh.dataset.columns = `${valuew + 3}`
    texth.innerHTML = valueh +3
}

    And then retrieving said data in another js file (it outputs when a button is pressed):

    const button = document.querySelectorAll('.buttons')
const rowscolumns = document.getElementById('sliderh')

function update() {
    console.log(rowscolumns.dataset.rows)
    console.log(rowscolumns.dataset.columns)
}

button.forEach(item => {
    item.addEventListener("click", update);
})

  2. 0

    When I output them to the console it just outputs "".

    if you check the documentation here as it says:

    Return Value

    A string containing the value of the property. If not set, returns the empty string.

    It shows your property as String in quotes "". Nothing is wrong.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search