javascript - 修改每个元素的CSS属性

Question

我目前正在尝试创建一个“页面修改器”。简单地说，这是一个网页，其中包含 object元素为 data属性设置为所需的页面。

我遇到的问题是修改该对象内的元素。我有 3 div我页面上的元素( topArea 、 MainBodyArea 、 ControlHostArea )- MainBodyArea包含 id 为 LoadedPage 的对象(这是用于显示所需页面的元素)。

我有一个按钮(输入类型按钮，而不是 <button> )，ID 为 ApplyStyle 。我尝试过这样的事情；

$("#ApplyStyle").click(function(){
  $("#LoadedPage").find("*").css("border", "2px solid red");
});

出于某种不明显的原因，这不会改变 #LoadedPage 中的元素。 - 没有任何迹象表明元素样式属性已发生根本更改。

我已在自己的网站 ( http://www.innuendo-eu.co.uk ) 中尝试了以下代码；

$("#ApplyStyle").click(function(){
  alert($("#LoadedPage").find("#menu-nav").css("border"));
});

出现的警报只是“未定义”(border未在该元素上定义，但我也尝试使用“margin”，它已定义，但警报返回相同的“未定义”)。我想我正在尝试错误地与页面元素交互。

我应该澄清，当用户单击不同的按钮时，我会动态添加“LoadedPage”；

$("#LoadPage").click(function(){
  $("#MainBodyArea").html('<object id="LoadedPage" style="height:100%; width:100%;" data="' + $("#txtDestPage").val() + '">');
});

如果我用 LoadedPage 发出警报width 属性在创建之前，会返回 undefined，但是创建之后点击它，会返回定义的值。

我想做的是找出元素交互哪里出了问题，以及如何更改(按照示例)LoadedPage 中每个元素的边框。为“2px 纯红色”。

Answer 1

您关闭多引号的方式是错误的；尝试一下

$("#ApplyStyle").click(function(){
  $("#LoadedPage").find("*").css("border", "2px solid red");
});