javascript - 检查类是否存在,否则将高度添加到 div

标签 javascript

我想做的是检查类是否存在。如果存在,则在另一个类中添加高度“X”px,如果不存在,则添加高度“Y”px

不使用 Jquery。并且IE8应该支持。 IE8 不支持 document.getElementsByClassName ,因此使用了 className.match ,但它又开始变得更长。我下面的代码没有超过第三个

JSBIN

谁有一个简短的 IE8 友好代码?

window.onload = window.onresize = function heightResize () {
var browserHeight = window.innerHeight;
var present=document.getElementsByTagName('p');
alert(present.length);
 for (var i=0; i<present.length; i++) {
  if (present[i].className.match(/\bbuttons-container\b/))
       {
 alert("Yes Present");
 document.getElementsByClassName("boxcontent")[0].style.height = browserHeight -150 + "px";
       } else {
alert("Not Present");
document.getElementsByClassName("boxcontent")[0].style.height = browserHeight -200 + "px";
              }

              }

              };

HTML

 <p>
First Para
 </p>
  <table>
  <tr>
  <td>
    <p>
Second Paragraph
    </p>
    <div  id ="overlay_modal" class="boxcontent">
      Output
    </div>
     </td>
   </tr>
   </table>

  <p>
Third Para
  </p>
   <p class="buttons-container">
Buttons
   </p>

最佳答案

使用你的代码,我可以制作这个版本:

function getElementsByTagClassName(tag, className) {
  var ret = [], tags = document.getElementsByTagName(tag), i, len, item;
  for (i = 0, len = tags.length; i < len; i++) {
    item = tags[i];
    if (item.className.match("\\b" + className)) {
      ret.push(item);
    }
  }
  return ret;
}

function heightResize() {
  var browserHeight = parseInt(window.innerHeight || document.documentElement.clientHeight), 
      paragraphs, found = false, boxcontent, i, len, elem;

  paragraphs = getElementsByTagClassName('p', 'buttons-container');
  found = paragraphs && paragraphs.length;
  boxcontent = getElementsByTagClassName('div', 'boxcontent');
  if (boxcontent && boxcontent.length) {
    for (i = 0, len = boxcontent.length; i < len; i++) {
      elem = boxcontent[i];
      if (found) {
          elem.style.height = (browserHeight - 150 > 0 ? browserHeight - 150 : 0) + 'px';
      } else {
          elem.style.height = (browserHeight - 200 > 0 ? browserHeight - 200 : 0) + 'px';
      }
      alert(elem.style.height);
    }
  }
}

window.onload = window.onresize = heightResize;

您可以找到jsfiddle here ,以及 embedded version (此处在 IE8 中进行测试)

关于javascript - 检查类是否存在,否则将高度添加到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26216540/

相关文章:

javascript - setProperty 不是函数(...)

javascript - 在 setTimeout 中修改 ng-show

javascript - 将 jQuery Deferred 与包含 $.each 的多个 ajax 一起使用

Javascript使用对象变量从数组中删除对象

javascript - 如何将 ReactJS/build 文件夹添加到现有网站结构

javascript - grunt 找不到模块 'coffee-script'

javascript - 删除文件夹 Google 脚本中除 x 个最新文件之外的所有文件

javascript - jQuery 没有获取密码字段值

javascript - datatable jquery 如何在控制台中查看表的数据

javascript - angularjs 处理 $resource $promise 错误