检查页面中是否存在具有特定类别的Div

Check if Div with specific Class exists in the page

本文关键字：Div 是否 存在 检查      更新时间：2023-09-26

我正试图通过在现有网页中插入我自己的Javascript文件来修改该网页。我正在通过我的Javascript插入一个新的div并将该div的背景设置为图像url来为该网页设置背景图像。为了将这张图片放在背景上居中，并使其占据整个网页，我使用

'background-size': 'cover'

财产。当然，这在旧的IE版本中不起作用。

我想修复它，我正在考虑按页面高度/宽度和图像高度/宽度计算的特定比例放大图像。

所以我想检测浏览器是否是IE。我检查了网页，它有检测浏览器的代码，并添加了一个IE类的div。

<!--[if lte IE 5]>
  <div class="ie">
<![endif]-->
<!--[if IE 6]>
  <div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
  <div class="ie ie7">
<![endif]-->

我的问题是我如何检测这个页面是否有一个类为ie的div。此外，如果有人能提出一种替代方法，在网页上设置一个完全占据它的背景图像，而不考虑图像/页面的尺寸和图像中心的焦点，我将不胜感激。

您必须循环浏览页面上的所有<div>元素，直到其中一个元素与您要查找的className相匹配。类似于：

var div = document.getElementsByTagName('div');
for(i=0; i<div.length; i++) {
    if(div[i].className.match(/(^|'s)ie('s|$)/)) {
        // Code to Do your IE Stuff Here
        break;
    }
}

document.addEventListener("DOMContentLoaded", function() {
  var ie = document.getElementsByClassName("ie");
  if(ie.length > 0) {
    alert("It's IE!");
  }
}

这应该回答了你的第一个问题，尽管我同意有更好的解决方案可以实现你的总体目标。

如果您在页面中加载jQuery库，您可以从Google CDN链接该库，这是一件非常简单的事情。

CDN：https://developers.google.com/speed/libraries/devguide#jquery

用法：$("div.className"(.first((

否则，这将需要付出更多的努力。。。处理此问题的最佳方法是向div元素添加一个id属性，如下所示：

<div id="myElement"></div>

然后使用document.getElementById函数来检索div标记。

document.getElementById('myElement');

要查看添加后是否有特定的类，请参阅其他帖子：测试元素是否包含类？

相关文章：