CODEWITHSUNDEEP
javascriptjqueryhtml
BruceWayne
BruceWayne

Reputation: 23285

Get a class width/height/etc.?

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!

Upvotes: 4

Views: 7864

Answers (4)

Muhammad
Muhammad

Reputation: 7344

$(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>

Upvotes: 1

Get Off My Lawn
Get Off My Lawn

Reputation: 36351

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.

Upvotes: 2

RobertAKARobin
RobertAKARobin

Reputation: 4274

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.

Upvotes: 0

P.S.
P.S.

Reputation: 16392

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
});

Upvotes: 1

Related Questions