Get a class width/height/etc.?

user_4650297 0
Viewed 5750

How can I search for a class or id's width value (or anything else, say height, color, etc), and use that in CSS?

I am using Bootstrap, and have a container. I'd like to set the padding of another class to be the same width as the container.

I have found that via javascript console on the site itself, I can do:

var wid = $(".container").width();

which returns 750.

How do I implement that in my CSS?

.sampOutput{
    border: 1px solid black;
    padding-right:100%;
}

Where the padding-right would be 750.

Then I'd want to get the color of my body and set that as the border color.

How do I get the various values of a class/id's style?

Edit: I'm learning, and see Javascript (or jquery) may help, but if there are other ways, I'm open to it!

html jquery javascript
4 Answers

you can get and set css elements with the css() method.

var width = $(".container").width();
var color = $("body").css("color");

$("#element").css({
    border: "solid 1px " + color,
    "padding-right": width + "px"
});

There are two main ways to place the code on your page (the third is outdated and probably shouldn't be mentioned):

Method one inline within the head:

<html>
    <head>
        <script>
            // Your JavaScript goes here
        </script>

Method two include the JavaScript file

<html>
    <head>
        <script src="/path/to/javascript/file.js"></script>

If you want to modify the stylesheet directly, this cannot be done within the browser. You have to use a preprocessor such as sass/scss (most popular) or less.

user_17784650

You can use variables in CSS/SASS/LESS and then use them as values, but in many cases it will not give you the actual with (for example width) of the element. SASS/LESS are rather powerful, I think you can do the trick with this preprocessors, but not in pure CSS. If you want to get the actual width of the element and use this value for another elements styles, you should implement it via Javascript. I see you're using jQuery, so in jQuery it should be something like this:

var wid = $(".container").width(); // for example returns 750
$(".container").css({
  "border": "1px solid black",
  "padding-right": wid + "px" // set padding-right to 750
});
user_60536540 

$(function(){
  var cPadding = $('.my-container').css('padding');
  var bColor = $('body').css('color');
  $('.my-p').css('padding', cPadding).css("border", "1px solid " + bColor);
});
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body {
    margin: 10px;
    color: purple;
}
<div class="container my-container">
  <p class="my-p">Welcome to Bootstrap</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

user_19662470

The more traditional approach is to not use JavaScript to modify the stylesheet itself, but to use it to modify inline styles. That is: <div style="padding-right:750px">.

So in this case, you would want to do something like:

var wid = $(".container").width();
$(".sampOutput").css({
  "padding-right": wid + "px"
});

That will select element with the class of sampOutput and modify its style attribute to include padding-right:750px.

user_20533890
Related