All geek questions in one place

Get class width / height / etc.?

How can I find the value of a class or id width(or anything else, say height, coloretc.) and use this in CSS?

I use Bootstrap and have a container. I would like to set the addition of another class to the same width as the container.

I found that through the javascript console on the site itself I can do:

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

which returns 750.

How to implement this in my CSS?

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

Where padding-rightwill be 750.

Then I want to get colormine bodyand set it as color border.

How to get different class / id style values?

Edit: I am learning and see that Javascript (or jquery) can help, but if there are other ways, I am open to it!

+4
4

css css().

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

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

( , , ):

:

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

JavaScript

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

, . , sass/scss ( ) less.

+2

CSS/SASS/LESS, , (, ) . SASS/LESS , , , CSS. , Javascript. , jQuery, jQuery - :

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

$(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>
Hide result
+1

- JavaScript , . : <div style="padding-right:750px">.

, - :

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

sampOutput style, padding-right:750px.

0

Source: https://habr.com/ru/post/1688717/

More articles:


All Articles