JavaScript和CSS中ID的目標子div-有解無憂

我很難定位子 divid="videoContainer"并更改其樣式

<div id="videoContainer">
  <div style="width: 640px; height: 360px">   <------- target this
    <video
      src=""
      preload="auto"
      autoplay=""
      style="width: 100%; height: 100%"
    ></video>
  </div>
</div>


const videoContainer = document.getElementById('videoContainer')
document.getElementById('videoContainer').children?.[0]?.setAttribute("style", `width: 150px; height: 200px;`);

uj5u.com熱心網友回復：

您可以將 querySelector 與直接子運算子>:first-child一起使用（如果您有多個子 div ，則可能首先使用），如下所示：

const videoContainer = document.querySelector('#videoContainer > div')
videoContainer.style.width =  "150px"
videoContainer.style.height = "200px"
console.log("videoContainer width is", videoContainer.style.width)

/* what I think you need too */
#videoContainer video {
  object-fit: contain;
}

<div id="videoContainer">
  <div style="width: 640px; height: 360px">   <!------- target this -->
   <video src="//samplelib.com/lib/preview/mp4/sample-5s.mp4"       
    preload="auto"
    autoplay=""
    style="width: 100%; height: 100%"></video>
  </div>
</div>

object-fit: contain將迫使您的視頻縮放到其父級。您可能想要使用cover，否則。有關更多資訊，請閱讀模擬或background-size:cover<video><img>

uj5u.com熱心網友回復：

您可以通過添加 id/class 并在 css #Idname 或 .Classname 中像這樣指向它來定位它，例如：

檔案.html：

<div id="videoContainer">
  <div id="idname" class="classname" style="width: 640px; height: 360px">   
    //....
  </div>
</div>

檔案.css：

#idname {
    width: 640px;
    height: 360px;
}
//OR
.classname {
    width: 640px;
    height: 360px;
}

或者仍然使用css，例如：

#videoContainer > div {
    width: 640px;
    height: 360px;
}

或者用js：

const videoContainer = document.getElementById("videoContainer").firstChild; // or
const videoContainer = document.getElementById("videoContainer").childNodes[0]; //or
const videoContainer = document.querySelector('#videoContainer > div');

videoContainer.style.width = '640px';
videoContainer.style.height = '360px';

uj5u.com熱心網友回復：

這是如何做到的。希望這能回答你的問題。

document.getElementById("videoContainer").children[0].style.background="red";

<div id="videoContainer">
  <div style="width: 640px; height: 360px">  
    <h1>Your Content </h1>
  </div>
</div>

uj5u.com熱心網友回復：

你可以這樣使用>>>>

document.getElementById("your_element_id").style.property = 新樣式

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525674.html

標籤：javascripthtmlcssecmascript-6

上一篇：css過渡影片不起作用。我該如何解決？

下一篇：如何制作FAQ手風琴切換？