根据图像位置目录附加CSS样式

时间:2013-09-19 19:16:40

标签: javascript jquery css content-management-system twitter-bootstrap-3

我想根据图像的位置向图像添加或附加一个类。

背景:我正在重新编写我的公司以使用Twitter Bootstrap。当前站点使用CMS(使用CKEditor)为猴子添加文本和上传图像。我想将引导类“img-responsive”应用于他们上传的所有内容。但我不想将这个类应用于我用于网站核心的图像(即徽标,外观和感觉等)。他们的图像上传到/ 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”并为网站图像创建一个新的“无img-responsive”。但我希望实现更顺畅。

由于

3 个答案:

答案 0 :(得分:2)

这里你用纯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">

答案 1 :(得分:1)

也许您应该尝试使用Jquery过滤器函数来返回目标img上的当前“src”,或者使用conditionnal修改此函数(如果...)。

$('img[src^="*yourPath*"]')
        .not('*the other path*']')
        .addClass ('*img-responsive*');

它会检查您上传图片的“src”条件。

答案 2 :(得分:0)

您可以使用JQuery检查文档准备好的图像src属性,并对他们的src以“/ images”开头的所有图像应用img-responsive

其他解决方案是使用Less