Getting the height of an option element with javascript?

问题

As usual, option elements are shown when a select element is clicked and I'd like to get the height of the option elements.

Thanks.

Edit @david old school select

<select>
<option>a</option>
<option>s</option>
</select>

回答1:

I believe this is what you want

$(document).ready(function () {
  $("#mySelect").change(function () {
    alert($(this.options[this.selectedIndex]).height());
  });
});

Here is a demo http://jsfiddle.net/xf3wD/

回答2:

That's not possible, as it's actually not the option elements that are shown.

The HTML standard only specifies that the browser should provide some way of choosing from the options, not how that should be displayed. Therefore there is no standard way of getting any information about how it's displayed.

Regular browsers show the options as some kind of dropdown list, but other browsers may show it in a completely different way. Some mobile phone browsers for example shows a popup that covers the entire screen.

回答3:

If you're using a library like jquery, you can do:

$('#select option:first').height()

See here.

If you're not using jquery, look at offsetHeight. This should get you what you want.

回答4:

On select you can do that:

$(document).ready(function() {

    $('#select').click(function() {
        var H = $(this).children().height();
        alert(H);
    });

});

来源：https://stackoverflow.com/questions/4240385/getting-the-height-of-an-option-element-with-javascript

标签

javascript

jquery

css

select

option