Chrome擴展的內容腳本中的HTML5視頻元素和jQuery

Question

在控制檯中，如果使用：$("#player > video").videoWidth，我會得到結果：1920（或其他）。

但是，在Chrome擴展程序的內容腳本中，console.log($("#player-api video").videoWidth);產生結果undefined。要獲得數1920我必須使用console.log($("#player-api video").get(0).videoWidth);

同樣，在控制檯上我可以這樣做：

video = $("#player > video") 
video.style.width = "1920px" 

和CSS樣式的寬度將變化在視頻元素。

代碼$("#player-api video").css("width", '"' + video_width + 'px"');確實從內容腳本不工作。這很奇怪，因爲$("#player-api video").css("zoom", "reset")呢。因此，元素的樣式寬度和高度特別令人感到奇怪。我們可以進一步期待看到這一點：

從內容腳本我必須設置$("#player-api video").get(0).style.width = "1920px"或使用video = $("#player-api video").get(0)，並設置video.style.width。這是因爲$("#player-api video")沒有樣式屬性。但是，從foo.get(0)中設置style.width不會更改元素的樣式。

最後，如果我嘗試直接使用方法$("#player > video").width，那麼從控制檯，我發現它是一個屬性（並且它不設置爲任何內容）。設置這個屬性對元素的樣式沒有影響，但至少在那裏。但是從內容腳本這是一種方法，它不會對元素產生影響。

爲什麼HTML5VideoElement的行爲如此呢？通常元素永遠不需要使用.get(0)來檢查或操縱。

和如何從Chrome擴展的內容腳本更改HTML5視頻元素的元素樣式（寬度和高度）？

Answer 1

我找到了答案一半我的問題。

var video = $("#player-api video").get(0); 

for (method in video) { 1; } // ensure all methods are loaded up 

var css = video.style.cssText; 
video.style.cssText = css.replace(/width:\ \d+\S+/, "width: " + video.videoHeight + 'px;').replace(/height:\ \d+\S+/, "height: " + video.videoWidth + 'px;'); 

將從內容腳本視頻元素的實際樣式和觀察到的寬度和高度改變。這足夠我的需求，但並不真解釋是怎麼回事。

如果有人和答案爲什麼視頻元素的.style.width可以從控制檯被分配成功改變元素的風格，但.style.width可以不如此從內容腳本分配，我會獎勵答案給他們。否則，我會在兩天內爲檢測對象時發現的.style.cssText解決方案聲明。