獲得班級寬度/高度等。

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 。

然后我想得到我body的color並將其設置為border顏色。

如何獲得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 （最受歡迎）或更少。

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

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

Answer 4

更傳統的方法是不使用JavaScript來修改樣式表本身，而是使用它來修改內聯樣式。 那就是： <div style="padding-right:750px"> 。

所以在這種情況下，您可能希望執行以下操作：

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

這將選擇具有sampOutput類的sampOutput並修改其style屬性以包含padding-right:750px 。

獲得班級寬度/高度等。

問題描述

4 個解決方案

解決方案1
2 2017-11-04 02:05:18

解決方案2
1 2017-11-04 02:04:35

解決方案3
1 2017-11-04 03:17:42

解決方案4
0 2017-11-04 02:06:56

獲得班級寬度/高度等。

問題描述

4 個解決方案

解決方案1 2 2017-11-04 02:05:18

解決方案2 1 2017-11-04 02:04:35

解決方案3 1 2017-11-04 03:17:42

解決方案4 0 2017-11-04 02:06:56

解決方案1
2 2017-11-04 02:05:18

解決方案2
1 2017-11-04 02:04:35

解決方案3
1 2017-11-04 03:17:42

解決方案4
0 2017-11-04 02:06:56