的Javascript：选择图像元素的DIV

里面我有一个父DIV gal1，在其内部可以有进一步的div和内容，但只有一个img元素没有ID你可以看到下面。现在我只想使用Javascript（没有jQuery）来改变这个图像的样式，使用gal1作为参数（因为这个div内部的其余结构可能会有所不同，只有这个一个图像将永远存在某处）。我找不到任何其他可以解决我的情况的计算器问题。的Javascript：选择图像元素的DIV

<div class="gallery-preview" id="gal1"> 
    <div class="gallery-preview-img" id="gal-img1"> 
     <img src="galleries/kevin-carls/Monks.jpg"> 
    </div> 
    <div class="gallery-preview-text" id="gal-text1"> 
     <span class="gallery-name" href="">Road to India</span><br/> 
     <span class="artist-name" href="">Kevin Carls</span> 
    </div> 
</div>

来源

2012-01-16 Abhranil Das

深度的div中的img元素的ID为gal1是已知的吗？ – kinakuta 2012-01-16 07:08:26

假设它不知道会更好。 – 2012-01-16 07:09:22

比你可以使用的方法称为getElementsByTagName('img')比你应该得到的图像并进行更新。

document.getElementById(gal1).getElementsByTagName('img');

来源

2012-01-16 07:07:29

好的，我正在寻找这方面的一些信息。同时，你能否扩展你的答案，举一个例子说明你将如何在我的案例中使用它？ – 2012-01-16 07:08:39

只要它在代表祖先gal1 div的节点上调用，就可以很好地工作。 NM - 我看到你的代码片段就是这样做的。 – kinakuta 2012-01-16 07:10:00

@Abhranil Das - 检查答案已更新 – 2012-01-16 07:10:34

如果你不得不这样做，那么你可以插入更高效的CSS。

http://jsfiddle.net/65Ggv/

var style_rules = [];  
style_rules.push("#gal1 img { border: 3px solid green; } ");  
var style = style_rules.join("\n"); 

var el=document.createElement("style"); 
el.appendChild(document.createTextNode(style)); 
el.type="text/css"; 
document.head.appendChild(el);

来源

2012-01-16 07:12:57 mrtsherman

在许多情况下，确实需要这样做。你的解决方案听起来不错，但我仍然不熟悉网页设计，所以我需要一些时间来解决它。 – 2012-01-16 07:54:51

好吧，明白了。很好的解决方案。 +1！ – 2012-01-16 07:57:48

获得通过使用ID对应的内容，然后通过使用的getElementsByTagName

function getImages(contentId) { 
    var content = document.getElementById(contentId); 
    // only one image, just return an item; or you can return an array 
    if (content) return document.getElementsByTagName('img')[0]; 
}

来源

2012-01-16 07:13:40 liunian

相同的解决方案，但因为您是新手，因此需要+1。 – 2012-01-16 08:12:17

查询图像，除非你绝对需要选择颜色或边界动态尺寸，我怀疑是因为你是一个被认可的初学者，用JavaScript填充样式表是一个Rube Goldberg设备。能做到这一点似乎很重要，但如果你的申请对你很重要，你会后悔的。（在这种情况下，您最好使用innerHTML填充样式表 - 至少它会比DOM调用更快）。

如果您的约束实际上是稳定的，Pranay Rana的使用getElementsByTagName的答案是最好的选择只有一个img）。使用getElementById获取元素引用el，将其添加到gal1，然后var myimg = el.getElementsByTagName（“img”）即可完成。

如果您坚持使用风格节点进行加工，您可以将所需的任何属性填充到myimg的样式属性中。它变成内联样式。即使如此，你几乎可以肯定不需要用新颖的规则填充内容，而且改变内联风格通常是可以避免的。修改myimg上的类属性更具可预测性和稳定性，并为需要处理的情况使用预定义的一组样式类。这将给脚本提供一个很好的清晰风格分离，避免通过代码注入来避免样式规则的内联和样式树的运行时残缺。

来源

2012-01-16 15:19:56 jerseyboy

对于我的特定应用程序，我恐怕需要更改内联样式而不是类属性。本质上我比较了img的高度和宽度。根据哪个更大，我可以将其设置为高度值或宽度值，并让其他比例值。 – 2012-01-16 16:09:01

CSS3有background-size：cover;和background-size：包含;这在这种情况下也是有用的。 – jerseyboy 2012-02-04 20:32:17

+1：虽然我不需要这个问题，但它会派上用场，用于我想在同一个项目上做的其他事情。 – 2012-02-05 07:01:35

的Javascript：选择图像元素的DIV

回答

相关问题