為什么這個函數在作為書簽運行時返回 undefined ？

Question

我正在嘗試創建一個書簽，它將改變我每天使用的界面的樣式，以使其更易於使用。 但是，當我開始縮小代碼的過程時，我只會在控制台中收到undefined錯誤。

我究竟做錯了什么？

這是我最近的嘗試。 以前的嘗試在底部。

javascript:void%20function(){var%20a=document.querySelectorAll(%22.btn%22);a.forEach(function(a){a.setAttribute(%22style%22,%22padding:%2015px%2025px%20!important;%22)})}();

滿的：

var matches = document.querySelectorAll('.btn');


matches.forEach(function(item) {
  item.setAttribute("style","padding: 15px 25px !important;");
});

非 URL 編碼的書簽：

javascript:void function(){var a=document.querySelectorAll(".btn");a.forEach(function(a){a.setAttribute("style","padding: 15px 25px !important;")})}();

Answer 1

bookmarklet 必須返回undefined ，否則它將無法正確執行代碼（它可能會刷新頁面、打開輸入而不是停留在頁面上等）。 所以undefined不是錯誤，它是任何書簽的正常問題，也是唯一可行的選擇。

如果書簽沒有按預期執行，問題就會出現。 至於您的代碼，檢索具有 className 'btn'元素的完整代碼似乎可以正常工作。

問題只是書簽構造，使用IIFE 構造可能會更好，即立即調用函數表達式：

javascript:(function () {
    /*code here*/
})();

因此，工作書簽代碼應該是這樣的：

javascript:(function () {
    var matches = document.querySelectorAll('.btn');
    matches.forEach(function(item) {
        item.setAttribute('style','padding: 15px 25px !important;');
    });
})();

您可以復制粘貼代碼，而不必擔心空格（如%20 ）或換行符； 代碼應該在將其作為書簽插入后自行修復。

PS：如果有人希望確保它有效，您可以將document.querySelectorAll('*')替換為document.querySelectorAll('.btn')以將更改應用於所有內容並立即查看結果。

下面是一個例子：

 /* javascript:(function () {*/ var func1 = function(){ var matches = document.querySelectorAll('.btn'); matches.forEach(function(item) { item.setAttribute('style','padding: 15px 25px !important;'); }); } /* })();*/

 <p><button id='id1' class='btn'>my button1</button></p> <p><button id='id2' class='btn'>my button2</button></p> <p><button id='id3' onclick=func1()>Press to Execute Code</p>