Question

我有以下HTML文件，除了CSS样式指定的一些div类对象外，其中没有任何内容。如果我打开此网页并检查Chrome中的元素，它们就是我希望它们的尺寸。我想知道的是，如果我可以通过javascript访问这些大小。

HTML文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>TEST</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">

        .camp_cont {
            float: left;
            width: 45%;
            height: 50%;
            position: relative;
        }

        .camp_cont_select {
            float: left;
            width: 45%;
            height: 50%;
            position: relative;
            fill: #800;
        }

        .sub_camp_cont {
            float: left;
            width: 15%;
            height: 50%;
            position: relative;
            margin: 10px 25px;
            fill: #800;
        }

    </style>

</head>

<body>
    <div class="camp_cont", id="cpa_perf"></div>
    <div class="camp_cont", id="ctr_perf"></div>
    <div class="sub_camp_cont", id="as_perf"></div>
    <div class="sub_camp_cont", id="f_perf"></div>
    <div class="sub_camp_cont", id="rh_perf"></div>
    <div class="sub_camp_cont", id="rm_perf"></div>
    <div class="sub_camp_cont", id="rl_perf"></div>
    <div class="sub_camp_cont", id="ul_perf"></div>
    <div class="sub_camp_cont", id="rt_perf"></div>

</body>

</html>

我想知道我是否可以做以下事情：

x = $("#cpa_perf").width()

同样，当我在Chrome中检查cpa_perf时，它的宽度为515px。这就是我想要的东西

Answer 1

jQuery Width可以正常使用：

x = $("#cpa_perf").width();
alert(x);

JS小提琴：http://jsfiddle.net/9abcf9d3/

Answer 2

您可以非常轻松地使用jQuery来修改元素的属性..

$('.classname').css(property, value);

Answer 3

我不确定您是否尝试使用jQuery或纯javascript。

只要您使用jQuery库，您就可以正常尝试获取元素的宽度。

否则，如果你只想要使用纯javascript的元素宽度，你可以使用这样的东西：

var x = document.getElementById('cpa_perf').offsetWidth;

如果您要包含一个jQuery库，那么以下内容应该可以工作：

var x = $("#cpa_perf").width()

附加说明：确保在将DOM元素写入页面之前不调用脚本。例如：

$(document).ready(function (){
    var x = $("#cpa_perf").width();
    console.log(x);
}) ;

如何根据类获得div的大小？

3 个答案: