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

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

内容简介：一個常見的需求，由於不算視覺部分，直覺要使用 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

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

查看所有标签

猜你喜欢:

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

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

码农书籍

C++标准模板库编程实战

Ivor Horton / 郭小虎、程聪 / 2017-1

《C++标准模板库编程实战》介绍最新的C++14标准的API、库和扩展，以及如何将它们运用到C++14程序中。在书中，作者Ivor Horton 则阐述了什么是STL，以及如何将它们应用到程序中。我们将学习如何使用容器、迭代器，以及如何定义、创建和应用算法。此外，还将学习函数对象和适配器，以及它们的用法。阅读完本书之后，你将能够了解如何扩展STL，如何定义自定义类型的C++组件，你还将能够......一起来看看《C++标准模板库编程实战》这本书的介绍吧!

码农工具