抓取更新後的CSS屬性值

有沒有辦法提取用jQuery動態更新的CSS屬性的值？例如，一個div可以從0不透明開始。在每次懸停時，div會添加更多的不透明度，因此通過jQuery抓取不透明度將抓住第一次懸停時的原始不透明度以及每次額外懸停時的新不透明度。抓取更新後的CSS屬性值

在jsfiddle中，我通過創建一個新的數據屬性來工作，但我想要更新屬性。在我獲取不透明度屬性的示例中，您可以看到2次懸停後變量不再正確更新。

（https://jsfiddle.net/nvr6qx3k/4/）

$(".row").on("mouseover", "div", function() { 
 

 
\t var opacity = parseInt($(this).css("opacity")) || 0; 
 
    opacity = opacity + 1; 
 
    \t $(this).css("opacity", opacity); 
 
    console.log("opacity is " + opacity); 
 
    
 
    var count = parseInt($(this).data('click')) || 0; 
 
    count = count + 1; 
 
    $(this).data("click", count); 
 
    console.log("count is: " + count); 
 
    
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    opacity: .5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
</div>

來源

2017-04-24 randyturtle

我認爲，不透明度爲1.0的最大，所以如果你把它加1它將成爲2.但是2設置爲不透明度將是有限的，並設置爲1.0;我試着用0.1遞增，因爲你的CSS在第一次懸停時將不透明度設置爲0.5，它返回0.6並且在第二0.7，然後0.8,0.9終於1.0和1.1，這將不會更高，因爲你爲不透明風格設置的值被限制爲1.0 （我也改變parseInt parseFloat所以它以0.1增量工作） –

哇，就是這樣！非常感謝！：d – randyturtle

CSS不透明度值是從0到1
1 beeing 100％

所以不透明度= 2沒有意義。

在鼠標懸停時，您應該添加0.1 ...並且您會看到效果。
也... parseInt()返回一個整數...

所以使用parseFloat是更好的中檢索的浮點數。
;）

var opacity; 
 

 
$(".row").on("mouseover", "div", function() { 
 

 
    opacity = parseFloat($(this).css("opacity")) || 0; 
 
    opacity = opacity + 0.1; 
 
    $(this).css("opacity", opacity); 
 
    console.log("opacity is " + opacity); 
 
    
 
    var count = parseInt($(this).data('click')) || 0; 
 
    count = count + 1; 
 
    $(this).data("click", count); 
 
    console.log("count is: " + count); 
 
    
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    opacity: .5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
</div>

來源

2017-04-24 02:02:35

您好我想你應該開始以0.2的不透明度，因爲CSS透明度最高值是1。也許添加0.2每鼠標。而不是parstInt使用parseFloat，因爲parseInt可以返回（0.5）的0，這就是爲什麼你不能得到當前不透明度的值。

檢查：

$(".row").on("mouseover", "div", function() { 
 

 
\t var opacity = parseFloat($(this).css("opacity")) || 0; 
 
    opacity = opacity + 0.2; 
 
    \t $(this).css("opacity", opacity); 
 
    
 
    var count = parseFloat($(this).data('click')) || 0; 
 
    count = count + 1; 
 
    $(this).data("click", count); 
 
    console.log("count is: " + count); 
 
    
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    opacity: .2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="box">Box 1</div> 
 
    <div class="box">Box 2</div> 
 
    <div class="box">Box 3</div> 
 
</div>

來源

2017-04-24 02:18:53

抓取更新後的CSS屬性值

回答

相關問題