javascript
js粘贴板为什么获取不到图片信息_JavaScript 学习笔记（3）：图片库
本文使用 Zhihu On VSCode 創(chuàng)作并發(fā)布
1. 為什么要使用圖片庫
可以把所有的圖片都放到一個網(wǎng)頁里，不過當(dāng)圖片過多時，會導(dǎo)致網(wǎng)頁體積過大。 因此，為每張圖片分別創(chuàng)建一個網(wǎng)頁的解決方案。 使用 js 來伊娃釁片是最佳選擇：把整個圖片庫的瀏覽鏈接集中在圖片庫主頁里，當(dāng)用戶點擊了這個主頁里的某個 圖片鏈接時，才把相應(yīng)的圖片傳送過去。
2. 準備
3. 改進
點擊某個鏈接后可以留在當(dāng)前頁面； 點擊鏈接后可以看到圖片以及可以看到圖片清單。
方法： 增加一個占位符圖片，當(dāng)沒有點時，顯示一個默認圖片，當(dāng)點擊圖片的鏈接時，攔截網(wǎng)頁的默認行為，將圖片顯示為所點擊鏈接的圖片。 將<img id="default" src="images/default.jpg" alt="My image gallery">;插入無序列表后。新建一個名為default的 id 樣式表，樣式可自定義。 顯示結(jié)果：
Image4. 實現(xiàn)
代碼：要修改占位符的顯示，只需將占位符的src屬性修改為相對應(yīng)的圖片屬性即可，需要使用的 js 方法有g(shù)etAttribute()和setAttribute()。 具體代碼：
// whic_pic 是元素結(jié)點 function show_pic(whic_pic) {// 獲取href屬性var source = whic_pic.getAttribute("href");// 獲取默認結(jié)點var placeholder = document.getElementById("default");// 設(shè)置屬性placeholder.setAttribute("src", source); }其它方法：
// 設(shè)置屬性 placeholder.src = source;使用：
- 在同目錄下創(chuàng)建一個名為show_pic.js的文件，將上述代碼放進去，再在gallery.html的<head>標簽里寫入<script src="show_pic.js"></script>。
- 要點擊某個鏈接觸發(fā)事件時，需要使用onclick事件處理函數(shù)。添加事件處理函數(shù)的語法是event="javaScript Statement(s)，所以調(diào)用show_pic的方法是：
- 攔截網(wǎng)頁默認操作：當(dāng)某個元素添加了事件處理函數(shù)后，如果那段 js 代碼返回的值是 true，那么 onclick 事件處理函數(shù)就認為這個鏈接被點擊了；如果返回的的 false，那么就認為沒有被點擊。例如onclick="return false"這個事件處理函數(shù)就會被瀏覽器認為沒有點擊，那么也不會調(diào)用默認的函數(shù)了。所以具體的代碼為：
詳細代碼為： // 目前只有手動添加
<li><aonclick="show_pic(this); return false;"href="images/dog.jpg"title="a dog east something">dog</a> </li> <li><aonclick="show_pic(this); return false;"href="images/follower.jpg"title="a follower ">follower</a> </li> <li><aonclick="show_pic(this); return false;"href="images/part.jpg"title="a part here">part</a> </li> <li><aonclick="show_pic(this); return false;"href="images/sea.jpg"title="the sea ">sea</a> </li> <li><aonclick="show_pic(this); return false;"href="images/star.jpg"title="water star">star</a> </li>現(xiàn)在已經(jīng)完成了圖片庫，無論點擊哪個都不會跳轉(zhuǎn)了。
Image5. 擴展
添加切換圖片時可以顯示不同的文本功能。之前在每個 a 屬性里都設(shè)置了 title 屬性，只要用getAttribute函數(shù)就可以將其提取出來，然后可以插入到 HTML 文檔中。 為此需要學(xué)習(xí)幾個新的 Dom 屬性。
childNodes 屬性：在節(jié)點樹上，這個屬性可以獲取元素所有的子元素，是一個數(shù)組。使用方法：var children = element.childNodes，例子：
// 獲取body節(jié)點，因為一個文檔只有一個body標簽，所以只需取第一個元素即可 var body_element = document.getElementsByTagName("body")[0]; // 獲取子元素 var body_children = body_element.childNodes;實測：將以下代碼放進show_pic.js里
function count_body() {var body_element = document.getElementsByTagName("body")[0];var num = body_element.childNodes.length;alert(num); }為了使文檔加載時使用，再添加window.onload = count_body;到 js 文件里，接著打開文檔，彈出計算的所有的 body 子元素屬性了。
nodeType 屬性 body 應(yīng)該只有 3 個子元素，但是顯示的數(shù)字卻比 3 大，只為文檔樹的節(jié)點類型并非只有元素節(jié)點一種。文檔里幾乎每一樣?xùn)|西都是一個節(jié)點，甚至連空格和換行符都是。 第一個節(jié)點都有 nodeType 屬性，nodeType 的值并不是英文，元素節(jié)點的 nodeType 是 1，屬性節(jié)點的值是 2，文本節(jié)點的是 3。 比如body_elemnt.nodeType的值是 1.
標記添加描述 在<img>下添加<p id="description">Choose an image</p>這一段文本節(jié)點。
獲取該結(jié)點
// 獲取title屬性 var title = whic_pic.getAttribute("title"); // 獲取p結(jié)點 var p_element = document.getElementById("description");實現(xiàn)文本切換 使用 DOM 提供的nodeValue屬性，它可以得到和設(shè)置節(jié)點的值。 <p>元素本身是nodeValue是一個空值，需要的是<p>子元素包含的值。 因此使用方法為：
p_element.childNodes[0].nodeValue;firstChild 和 lastChild 屬性 firstChild 是獲取節(jié)點的第一個元素，lastChild 是獲取最后一個元素。 即node.childNodes[0] === node.firstChild。 使用這兩個元素更簡潔了。
利用 nodeValue 刷新
// 將p元素賦值給nodeValue p_element.firstChild.nodeValue = title;最終代碼為：
// whic_pic 是元素結(jié)點 function show_pic(whic_pic) {// 獲取href屬性var source = whic_pic.getAttribute("href");// 獲取默認結(jié)點var placeholder = document.getElementById("default");// 設(shè)置屬性placeholder.setAttribute("src", source);// 獲取title屬性var title = whic_pic.getAttribute("title");// 獲取p結(jié)點var p_element = document.getElementById("description");// 將p元素賦值給nodeValuep_element.firstChild.nodeValue = title; }幾個新 DOM 屬性：
- childNodes
- nodeType
- firstChild
- lastChild
歡迎訪問我的個人博客。
總結(jié)
以上是生活随笔為你收集整理的js粘贴板为什么获取不到图片信息_JavaScript 学习笔记（3）：图片库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++怎么做app_想开发一个类似于抖音
- 下一篇： JavaScript 面向对象编程实现