Question

我有一个具有多个属性的选择输入。我给了元素固定的宽度。由于固定宽度，沿x方向的溢出内容是不可见的。所以我编写了一个小的JavaScript函数来为offsetWidth大于其scrollWidth的选项标签使用title属性设置工具提示。这在chrome中工作得非常好，但在IE 11中，offsetWidth和scrollWidth始终为零。请告诉我是否有另一种计算offsetWidth和scrollWidth的方法。

<!DOCTYPE html>
<html>
   <style type="text/css">
      .selectField {
         width: 100px !important;
      }
   </style>
   <script type="text/javascript">
      function updateTooltip() {
        var element = document.getElementById('selectField');
        for (var i = 0; i < element.length; i++) {
          if (element.options[i].offsetWidth < element.options[i].scrollWidth) {
            element.options[i].title = element.options[i].label;
          }
        }
      }
   </script>
   <body>
      <select multiple class="selectField" id="selectField">
         <option>One Two Three Four Five Six</option>
         <option>One</option>
         <option>Two </option>
         <option>Three</option>
         <option>Four</option>
         <option>Five</option>
         <option>Six</option>
         <option>One Two Three Four Five Six</option>
         <option>One</option>
         <option>Two </option>
         <option>Three</option>
         <option>Four</option>
         <option>Five</option>
         <option>Six</option>
         <option>One Two Three Four Five Six</option>
         <option>One</option>
         <option>Two </option>
         <option>Three</option>
         <option>Four</option>
         <option>Five</option>
         <option>Six</option>
      </select>
      <button onClick="updateTooltip()">Apply Tooltip</button>
   </body>
</html>

请在下面提到的plunker中找到工作副本 https://plnkr.co/edit/b9cFuUDXSt4wgcxql3ga?p=preview

Answer 1

您可以在项目中包含jQuery，并将UpdateTooltip方法更新为以下内容。我理解了从post创建动态div元素。

function updateTooltip() {
    var element = document.getElementById('selectField');

    for (var i = 0; i < element.length; i++) {
        //Create dynamic div with innertext set to option lable 
        var dynamicDiv = $(document.createElement("div")).text(element.options[i].label).css({
            position: "absolute", left: -9999}).appendTo("body");

        var width = dynamicDiv.width(); //Get width of the div

        if(width + 10 > element.offsetWidth) //Check the width of the div against select element width
            element.options[i].title = element.options[i].label;

        dynamicDiv.css({position: "static",left: "auto"}).detach(); //Remove dynamic div from DOM
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        .selectField {
            width: 100px !important;
        }
    </style>

<select multiple class="selectField" id="selectField">
    <option>One Two Three Four Five Six</option>
    <option>One</option>
    <option>Two </option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>One Two Three Four Five Six</option>
    <option>One</option>
    <option>Two </option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>One Two Three Four Five Six</option>
    <option>One</option>
    <option>Two </option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
</select>
<button onClick="updateTooltip()">Apply Tooltip</button>

如何计算IE11中具有多个属性的select字段的option元素的offsetWidth和scrollWidth

1 个答案: