如何根據 File Extension 自動顯示圖片 ?

栏目: CSS · 发布时间: 7年前

内容简介：一個常見的需求，由於不算視覺部分，直覺要使用 JavaScript 處理，其實 CSS 就能解決。CSS 3

一個常見的需求，由於不算視覺部分，直覺要使用 JavaScript 處理，其實 CSS 就能解決。

Version

CSS 3

Image by File Extension

如何根據 File Extension 自動顯示圖片 ?

若 file extension 為 pdf ，則顯示 pdf.svg ；若為 doc ，則顯示 word.svg 。

若使用 JavaScript 當然可行，可能完全使用 CSS 實現嗎 ?

Attribute Selector

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Image by Extenstion</title>
  <style>
    .download a {
      display: block;
      padding-left: 30px;
    }

    .download a[href $= '.pdf'] {
      background: url('pdf.svg') no-repeat;
    }

    .download a[href $= '.doc'] {
      background: url('word.svg') no-repeat;
    }
  </style>
</head>
<body>
  <div class="download">
    <a href="aaa.pdf">aaa.pdf</a>
    <a href="bbb.doc">bbb.doc</a>
  </div>
</body>
</html>

21 行

<div class="download">
  <a href="aaa.pdf">aaa.pdf</a>
  <a href="bbb.doc">bbb.doc</a>
</div>

很平凡地將兩個 <a> 包在 <div> 內。

第 6 行

.download a {
  display: block;
  padding-left: 30px;
}

<a> 是 inline element，為了使其並排，將 display 設定為 block
圖片將使用 background-image 呈現，故特別將 <a> 設定 padding-left 用來顯示圖片

11 行

.download a[href $= '.pdf'] {
  background: url('pdf.svg') no-repeat;
}

Attribute selector 有個特色，就是能搭配 regular expression。

$= 表示結尾是 .pdf
使用 background 一次設定 檔案位置 與 no-repeat

15 行

.download a[href $= '.doc'] {
  background: url('word.svg') no-repeat;
}

大部分情況下，使用 background 是方便的，它讓我們一次設定多個 property。

但在這種使用情境下，我們卻必須 重複 設定 no-repeat 。

Refactor CSS

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Image by Extenstion</title>
  <style>
    .download a {
      display: block;
      padding-left: 30px;
      background-repeat: no-repeat;
    }

    .download a[href $= '.pdf'] {
      background-image: url('pdf.svg');
    }

    .download a[href $= '.doc'] {
      background-image: url('word.svg');
    }
  </style>
</head>
<body>
  <div class="download">
    <a href="aaa.pdf">aaa.pdf</a>
    <a href="bbb.doc">bbb.doc</a>
  </div>
</body>
</html>

第 6 行

.download a {
  display: block;
  padding-left: 30px;
  background-repeat: no-repeat;
}

將共用的 no-repeat 重構到 .download a ，如此 no-repeat 只要寫一次即可。

13 行

.download a[href $= '.pdf'] {
  background-image: url('pdf.svg');
}

改用 background-image ，只設定 檔案位置 即可。

17 行

.download a[href $= '.doc'] {
  background-image: url('word.svg');
}

不需再重複 no-repeat 。

Conclusion

善用 Attribute selector 的 regular expression，如此就不必使用到 JavaScript
當 property 重複設定時，可改設定到上層 selector

Reference

MDN , Attribute selector

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

大数据架构商业之路

黄申 / 机械工业出版社 / 2016-5-1 / 69.00元

目前大数据技术已经日趋成熟，但是业界发现与大数据相关的产品设计和研发仍然非常困难，技术、产品和商业的结合度还远远不够。这主要是因为大数据涉及范围广、技术含量高、更新换代快，门槛也比其他大多数IT行业更高。人们要么使用昂贵的商业解决方案，要么花费巨大的精力摸索。本书通过一个虚拟的互联网O2O创业故事，来逐步展开介绍创业各个阶段可能遇到的大数据课题、业务需求，以及相对应的技术方案，甚至是实践解析；让读......一起来看看《大数据架构商业之路》这本书的介绍吧!

码农工具