我試圖從每個孩子那里獲取 CSS 值，做一些計算，然后將其應用回每個孩子。
當嘗試使用 jQuery 將左 CSS 值分配給名為 X 的變數時，我收到此錯誤：
未捕獲的型別錯誤：無法在“視窗”上執行“getComputedStyle”：引數 1 的型別不是“元素”。
關于我如何做的代碼
const wayps = document.querySelector('#waypoints');
const children = wayps.childNodes;
var x,y,canvas_x,canvas_y,px_x,px_y;
children.forEach(function(wayps) {
x = $(wayps).css("left");
});
但是將 CSS 應用于陣列中的每個元素都不會出錯。
children.forEach(function(wayps) {
console.log(wayps.innerText);
// or
$(wayps).css("left" , 0 "px");
});
完整代碼
const wayps = document.querySelector('#waypoints');
const children = wayps.childNodes;
var x,y,canvas_x,canvas_y,px_x,px_y;
children.forEach(function(wayps) {
x = $(wayps).css("left");
x = x/2;
$(wayps).css("left" , x "px");
});
請求的 HTML
<div id="main">
<div id="map">
<div id="map_">
<div id="waypoints">
<div id="waypoint" class="waypoint_17" style="left: 0px; top: 0px;"></div>
<div id="waypoint" class="waypoint_18" style="left: 0px; top: 0px;"></div>
</div>
</div>
</div>
<div id="frm">
</div>
</div>
你怎么解決這個問題？
uj5u.com熱心網友回復：
我解決了我的問題。首先，我用一個類替換了 id，如下所示：
<div id="waypoint" class="waypoint_17" style="left: 0px; top: 0px;"></div>
和
<div class="waypoint" id="waypoint_17" style="left: 0px; top: 0px;"></div>
然后我用 querySelectorAll 代替 querySelector
document.querySelectorAll('.waypoint');
最后，要進行計算，獲取左值的正確方法是通過這樣做將其轉換為整數
x = parseInt($(wayps).css('left'));
最后是作業代碼
var waypsList = document.querySelectorAll('.waypoint');
[].forEach.call(waypsList, function(wayps) {
x = parseInt($(wayps).css('left'));
x = x/2;
$(wayps).css("left" , x "px");
});
uj5u.com熱心網友回復：
Node.childNodes回傳所有子節點，包括文本節點和注釋節點。該錯誤最有可能是在 jQuery 嘗試獲取之前的文本節點的計算樣式時引起的.waypoint_17（文本實際上只是空白）。
您可以使用document.querySelectorAll("#waypoints > div")來查找確切的節點。
PS：在一個檔案中有重復的ID是不正確的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371626.html
標籤：javascript 查询 css
上一篇：元素屬性上的三元運算子