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