Grab an inline style value

Asked

Viewed 81 times

0

If we consider an inline style HTML tag like this:

<li style="width: 360px; float: left; display: block;">conteudo</div>

it is possible I take only the value of the width to make a calculation via Javascript or Jquery?

from now on... thank you!

javascript html jquery css

2 answers

1


Yes friend, you can use clientWidth to return the value of the width of your element.

console.log(document.querySelector('li').clientWidth, document.querySelector('li').style.display, document.querySelector('li').style.float)
<li style="width: 360px; float: left; display: block;">conteudo</li>

EDIT

To get the other properties you can use the [DOCUMENT].style.[PROPERTY]

For example, to get the font color from your li you can do so:

document.querySelector('li').style.color

  • Thanks for the answer! It worked... But has a function like this for each style? Height, Color...

  • @Ivangomes edited the answer, see if it helps.

  • got it! Very good! Thank you.

1

Use the jquery css function as below:

var width = $("li").css("width"); // retorna: 360px 
width = $("li").width() // retorna 360
console.log(width);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li style="width: 360px; float: left; display: block;">conteudo</div>

Documentation: http://api.jquery.com/css/

  • In that case, to take only the numeric value, I would have to use an add-on, wouldn’t I? .

  • I put in the answer an equivalent option for width: $("li"). width()

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.