如何使用jquery获取“br”元素的高度?

时间:2016-09-14 07:21:21

标签: javascript jquery html css height

我尝试在我的网页上获得<br />的高度。我使用这个片段。

br_size = $('br').height();
console.log(br_size);

但只有Mozilla Firefox喜欢此代码,所有其他浏览器都返回0。 有一个简短的JS代码可以给我正确的高度吗?

PS:我使用此方法,因为我知道所需的尺寸XX= other_size - 4*br_size

4 个答案:

答案 0 :(得分:2)

换行符取决于HTML / BODY标记中指定的行高,如果未指定行高,则浏览器可能会使用自己的行。但是,如果指定行高,例如20px,则换行符应为20px。您可以使用JavaScript来确定默认的行高

(function() {
  var br = document.getElementById('foo');
  alert(br.scrollHeight);
  if (br.currentStyle) {
    alert(br.currentStyle['lineHeight']);
  } else {
    alert(document.defaultView.getComputedStyle(br, null).getPropertyValue('line-height'));
  }
})();
<br id="foo" />

答案 1 :(得分:1)

试试this。适用于chrome。

var br = $('br').first();
var div = $('<div>Text</div>');

div.css({
  'font-size': br.css('font-size'),
  'line-height': br.css('line-height'),
  'position': 'fixed',
  'visibility': 'hidden',
});

$('body').append(div);

alert(div.outerHeight());

div.remove();

答案 2 :(得分:0)

outerHeight怎么样?

public static DefaultTableModel buildTableModel(ResultSet rs)
        throws SQLException {

    ResultSetMetaData metaData = rs.getMetaData();


    // names of columns
    Vector<String> columnNames = new Vector<String>(1,1);
    int columnCount = metaData.getColumnCount();

    for (int column = 1; column <= columnCount; column++) {
        columnNames.add(metaData.getColumnName(column));
    }

    // data of the table
    Vector<Vector<Object>> data = new Vector<Vector<Object>>(10,2);

    while (rs.next()) {
        Vector<Object> vector = new Vector<Object>();

        for (int columnIndex = 1; columnIndex <= columnCount; columnIndex++) {

            if(rs.getObject(columnIndex).toString().equals("true"))
                vector.add(Boolean.TRUE);
            else        
            if(rs.getObject(columnIndex).toString().equals("false"))
                vector.add(Boolean.FALSE);
            else
                vector.add(rs.getObject(columnIndex));
        }

        data.add(vector);
    }

    return new DefaultTableModel(data, columnNames);

}

https://jsfiddle.net/6fag6tos/

答案 3 :(得分:0)

似乎<br>没有height属性。在浏览器检查中你也看不到它的高度。如果在<br>之后还有另一个elemetn,您可以使用以下代码:

var height = $("br").next().position().top - $("br").position().top
console.log(height);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p>
<br/>
<p>Goodbye</p>