我想根据图像的位置向图像添加或附加一个类。
背景:我正在重写我的公司,以使用 Twitter Bootstrap。当前站点使用 CMS(使用 CKEditor)让猴子添加文本和上传图像。我想应用引导类“img-responsive”他们上传的所有内容。但我不想将此类应用于我用于网站核心的图像(即 Logo 、外观和感觉等)。他们的图像上传到/images/目录,站点图像位于/siteimages/中。
之前:
<img src="/images/gorilla.png" />
<img src="/images/monkey.jpg" />
<img src="/siteimages/logo.jpg" />
<img class=”drunk” src="/images/chimp.gif" />
之后
<img class="img-responsive" src="/images/gorilla.png" />
<img class="img-responsive" src="/images/monkey.jpg" />
<img src="/siteimages/logo.jpg" />
<img class="drunk img-responsive" src="/images/chimp.gif" />
这可能吗?还是我想多了?任何帮助或线索将不胜感激。
我正在考虑的一个简单的解决方案是将“img-responsive”声明应用于所有“img”,并为网站图像创建一个新的“no-img-responsive”。但我想要一个更灵活的实现。
谢谢
最佳答案
这里是纯 JavaScript:
<img src="/images/gorilla.png" />
<img src="/images/monkey.jpg" />
<img src="/siteimages/logo.jpg" />
<img class="drunk" src="/images/chimp.gif" />
<script>
var imgs = document.getElementsByTagName('img');
for (var i=0;i<imgs.length;i++) {
var img=imgs[i];
if (img.src.indexOf('siteimages')==-1) {
var classes=img.className;
classes = (classes!='') ? classes+' img-responsive' : 'img-responsive';
img.className=classes;
}
}
</script>
img 类现已更改
<img src="/images/gorilla.png" class="img-responsive">
<img src="/images/monkey.jpg" class="img-responsive">
<img src="/siteimages/logo.jpg">
<img class="drunk img-responsive" src="/images/chimp.gif">
关于javascript - 根据图像位置目录附加 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18903083/