javascript - 我正在编写一个 jQuery 插件，它将为页面上的每个图像添加一个父 div。我应该考虑哪些 CSS 问题？

Question

我正在编写我的第一个 jQuery 插件，部分功能涉及在页面上的每个图像周围动态生成一个“框架 div”。框架必须“贴合”图像周围，因为它充当动态添加的绝对定位叠加图像的相对父级。

我希望这显然不引人注目。我可以做些什么来最小化它对用户自己的 CSS 的副作用？我想有些问题是不可避免的，对吧？我在考虑前任。如果用户 CSS 的目标图像带有..

div.gallery > img

..child 选择器为它们提供边框/边距/等，例如。

是否不可能以在未知页面上“安全”的方式动态生成元素的父 div？是否总是存在破坏用户 CSS 的风险？

我想我总是可以在文档中给出警告，但如果可能的话，我很乐意让它成为白痴。

我突然想到，我可以使用 JQ 读取包含的 IMG 上的任何 CSS .. 然后将任何属性“向上”传输到新的父 div。这是疯了吗？

score 1 · Accepted Answer

您可以使用选择器 .css 或 .height 或 .width 来获取图像的任何尺寸属性，然后基于此生成 div。例如，

thisWidth = $('theImage').width();
thisHeight = $('theImage').height();

$('yourFrame').css({'height':thisHeight,'width':thisWidth});

希望这个对你有帮助...

score 1 · Accepted Answer

从理论上讲，您可以复制所有样式。这个答案甚至显示了一个插件来获取跨浏览器的所有计算样式。但这将是一个矫枉过正，不是吗？如果您真的想拥有它，请将其添加为选项（false最好默认为）。然后让用户通过设置您提供的类的样式来修复它，正如 Blender 在评论中建议的那样。

2 回答 2