改變一個div的css屬性：在僞元素動態使用jquery後

這是我的情況：我有一個包裝div，主div裏面，然後<img />在主div，其長寬比我必須當窗口調整大小時保持不變。 <img />的寬度和高度不固定，可能會從一個圖像更改爲另一個。爲了保持各保留圖像的寬高比，我使用了一個:after僞元素對我的包裝類是這樣的：改變一個div的css屬性：在僞元素動態使用jquery後

wrapper:after{ 
    padding-top: **%; 
    display: block; 
    content: ''; 
}

但因爲我不知道該圖像的寬度和高度，我有計算其長寬比動態使用jQuery在頁面加載的時候，是這樣的：

$("#ad_image_main").load(function(){ 
    var h = $(this).height(); 
    var hh = (h/660)*100; 
    /**/ 
});

#ad_image_main是我<img />標籤的ID

而且我必須在/**/的padding-top值（即hh）中插入wrapper:after -element以獲得我想要的寬高比。

我該怎麼做？

來源

2014-06-20 Shanty

一個的jsfiddle的任何機會呢？ – wildandjam

好吧，我會把鏈接 – Shanty

你不能使用JS/JQ來定位一個僞元素，因爲**它不在DOM **中。 - http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-eg-before-and-after?rq=1 –

如果你在網絡上搜索，你會發現有兩個方法可以做到這一點（應用新class，更新document.stylesheet），但如果你只是插入一個<style>元素和寫入，它應該做你想要什麼。

這裏有一個小提琴：http://jsfiddle.net/gGzr9/

的基本腳本：

var $style = $('<style>'); 

$style.appendTo('head'); 

function updateStyle(px){ 
    var base = "#wrapper:after{display:block;content:'hello';padding-top:" + px + '%}'; 
    $style.html(base); 
} 

// Call updateStyle on resize - no resize, so we'll call it with click 
$('button').on('click', function(){ 
    updateStyle(Math.floor(Math.random() * 100)); 
});

來源

2014-06-20 09:52:10 Jack

感謝兄弟，它做了我的工作;） – Shanty

改變一個div的css屬性：在僞元素動態使用jquery後

回答

相關問題