HTML 代碼
<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled">
我已經檢查過：https ://www.w3schools.com/js/js_htmldom_elements.asp并嘗試過，但沒有幫助。
我想data-ad-status="unfilled"使用 javascript 從 HTML 中獲取這個元素。所以，我可以在 if else 陳述句中使用它。
喜歡
if (data-ad-status="unfilled") {
some fuctions;
}
uj5u.com熱心網友回復：
/*SELECTING BY CLASSANEMES*/
const withClassName = document.querySelectorAll(".adsbygoogle");
withClassName.forEach(ad => {
if ((ad.getAttribute("data-ad-status")) === "unfilled") {
console.log("unfilled ad element")
} else {
console.log("other ad element")
};
})<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>-document.querySelector("[data-ad-status='unfilled']這個選擇特定的一個data-ad-status="unfillded"
document.querySelectorAll("[data-ad-status]");這個是全選data-ad-status屬性。
const myDiv = document.querySelector("[data-ad-status='unfilled']");
const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
/*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
//let adStatus = myDiv.getAttribute("data-ad-status");
selectAllWithAttributeAdStatus.forEach(ad => {
if ((ad.getAttribute("data-ad-status")) === "unfilled") {
console.log("unfilled ad element")
} else {
console.log("other ad element")
};
})<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>uj5u.com熱心網友回復：
我們可以document.querySelector用來選擇我們的元素（如果只有一個）
但在這種情況下，我們需要querySelectorAll用于選擇 html ( <ins>)中的所有廣告元素
現在我們也可以在具有該狀態的每個元素上回圈您的邏輯，使用forEach
與
forEach您可以獲得 3 個其他資訊，
-元素本身（您可以使用它來執行邏輯，或 console.log 它）
-元素的索引
-所有元素的陣列
有了這個訂單(element, indexOfElement, ArrayOfAllElements)
這是一個例子：
let unfilledAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="unfilled"]`);
let successAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="success"]`);;
/* not success */
unfilledAds.forEach((adElement) => {
/* your logic */
console.log(`? this Ad is not filled`, adElement);
});
/* success */
successAds.forEach((adElement) => {
console.log(`? this ad is visible to the user`, adElement);
});<!-- fail -->
<ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
<ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
<!-- success -->
<ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
<ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>您還可以
[data-ad-status]通過選擇所有元素進行概括，然后做一個簡單的 if, else （檢查結果）
您還可以將這個自定義的 google 事件用于廣告https://developers.google.com/publisher-tag/samples/ad-event-listeners而無需重新發明輪子
，因此如果廣告在一段時間后成功，它將起作用。
只需查看檔案。
這里有一個例子：https ://googleads.github.io/google-publisher-tag-samples/advanced/ad-event-listeners/demo.html
uj5u.com熱心網友回復：
- 正如您告訴我的那樣，資料來自
async我在setTimeOut()這里添加了等待大約 2 秒的功能。 - 我無法訪問資料是如何來的，所以這次
2s是硬編碼的。更改它的值并嘗試運行它。我相信它會解決你的問題。 - 但是使用
asyn-await函式并selectAd()等待直到你的資料被加載。
const selecteAd = () => {
const myDiv = document.querySelector("[data-ad-status='unfilled']");
const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
/*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
//let adStatus = myDiv.getAttribute("data-ad-status");
selectAllWithAttributeAdStatus.forEach(ad => {
if ((ad.getAttribute("data-ad-status")) === "unfilled") {
ad.style.background = "red";
ad.style.height = "100px";
ad.style.width = "100px";
ad.style.display = "inline-block";
} else {
ad.style.background = "green";
ad.style.height = "100px";
ad.style.width = "100px";
ad.style.display = "inline-block";
};
})
}
const myTimeout = setTimeout(selecteAd, 2000);<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/498245.html