0

在之前关于边框图像的帮助下，我正确地进行了自定义框架。
这是一个快照：
使用 CSS 的边框图像

这是我的代码：

带有内联 CSS 的 HTML：

<div class="image-border" style="border-width: 10px; -moz-border-image: url(images/frame.png) 10 10 10 10 repeat;   -webkit-border-image: url(images/frame.png) 10 10 10 10 repeat; -o-border-image: url(images/frame.png) 10 10 10 10 repeat; border-image: url(images/frame.png) 10 10 10 10 repeat;">
     <img src="images/product-img.jpg" alt="Product Image With Specifications" width="277" height="auto"/>
</div> <!-- .image-border -->

其他外部 CSS：

.image-border img{
    margin: 5% 5%;
    max-width: 340px;
    border: 1px solid #686868;
    }

.image-border{
    background: #999;
    padding: 20px;
    border: 10px solid #000;
    max-width: 370px;
    box-shadow:inset 0 0 10px #000;
    /* BORDER IMAGE FOR DYNAMIC USE */
    border-style: solid;    
    }

现在我需要我的管理员用户动态地执行此操作。在艺术商店中，会有一些框架（管理员用户将上传它们），访问者用户只需单击一个框架，它就会相应地包装图像。

问题是：要做这样的事情我需要使用 jQuery。但是典型的 jQuery 使用<img/>标签并在一个到另一个之间切换。有一些thumb-frame.jpg和一些frame.jpg。当我单击拇指框时，JS 只需删除文件名的“拇指”部分并加载frame.jpg。切换适用<img/>于<img/>标记。但这border-image是一个 CSS 属性，而不是 HTML 的<img/>属性。

我试过这个。

问题来了：

  • 如何协调 jQuery 与 CSS 属性？

我想到的一件事是，为每种类型的框架加载一个单独的 CSS 类。但无法理解如何进行。

有人吗？

4

1 回答 1

1

您的问题有几种解决方案。这里只是其中的几个：

  • jQuery 的.css功能：
    正如@Ishank 指出的，您可以使用该.css功能直接更改元素的css。该函数有许多语法，可以在 http://api.jquery.com/css/ 阅读。对于您的特定问题，以下语法可能是最佳选择。
    例如 
//Sets Properties. Replace "url(..." with an empty string "" to reset property
$('.image-border').css({
    '-webkit-border-image': "url(/properties/border-image-1.png) 30 30 round",
    '-moz-border-image': "url(/properties/border-image-1.png) 30 30 round",
    '-ms-border-image': "url(/properties/border-image-1.png) 30 30 round",
    '-o-border-image': "url(/properties/border-image-1.png) 30 30 round",
    'border-image': "url(/properties/border-image-1.png) 30 30 round"
});
  • jQuery.addClass和.removeClass函数：
    顾名思义，这两个函数允许您添加和删除类。所以解决问题的一种方法是（使用更具体的选择器）
    $('.image-border').removeClass('image-border');
  • jQuery.wrap和.unwrap函数
    这两个函数允许您在选定对象周围包裹一个新元素或删除选定对象的父级。我不会真的推荐这个选项，因为我个人避免重复从 dom 中添加/删除元素。但是您可以通过在取消选择的对象上使用 unwrap 来实现这一点，然后用 div 包装单击的 img。
    例如
$('.image-border img').unwrap();
$('#newimg').wrap("<div class='image-border' style='border-width: 10px; -moz-border-image: url(images/frame.png) 10 10 10 10 repeat;   -webkit-border-image: url(images/frame.png) 10 10 10 10 repeat; -o-border-image: url(images/frame.png) 10 10 10 10 repeat; border-image: url(images/frame.png) 10 10 10 10 repeat;'>");

这些只是解决您问题的众多方法中的几种。我会推荐.addClass/.removeClass解决方案，因为它是最干净的，因为所有样式都保持不变，并且您只处理类。让我知道这一切是否有意义，是否有帮助:)

于 2013-04-18T06:39:57.780 回答