Question

如何搜索班级或ID的width值（或其他任何内容，比如height，color等），并在CSS中使用它？

我正在使用Bootstrap，并有一个容器。我想将另一个类的填充设置为与容器相同的宽度。

我发现通过网站上的javascript控制台，我可以做到：

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

返回750。

如何在我的CSS中实现它？

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

padding-right的位置750。

然后我想获得color的{{1}}并将其设置为body颜色。

如何获取class / id风格的各种值？

编辑：我正在学习，并且看到Javascript（或jquery）可能会有所帮助，但如果还有其他方法，我愿意接受它！

Answer 1

您可以使用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。

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

Answer 3

＆＃13;

$(function(){
  var cPadding = $('.my-container').css('padding');
  var bColor = $('body').css('color');
  $('.my-p').css('padding', cPadding).css("border", "1px solid " + bColor);
});

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body {
    margin: 10px;
    color: purple;
}

＆＃13;

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

＆＃13;

Answer 4

更传统的方法是不使用JavaScript来修改样式表本身，而是使用它来修改内联样式。那就是：<div style="padding-right:750px">。

因此，在这种情况下，您可能希望执行以下操作：

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

这将选择类sampOutput的元素并修改其style属性以包含padding-right:750px。

获得班级宽度/高度等。

4 个答案: