如何协调jQuery和CSS？

关于边框图像的previous assistance，我做了正确的自定义框架。
这里是一个单元：
Border Image using CSS 如何协调jQuery和CSS？

这里是我的代码：

HTML与内联CSS：

<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;  
    }

现在我需要我admin-user动态地执行它。在一家艺术品商店，会有一些框架（管理员用户将会上传），访客用户只需点击一个框架，它就会相应地包装图像。

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

我试过THIS ONE。

这里谈到的问题：

我如何能够协调与jQuery的CSS属性？

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

有人吗？

来源

2013-04-18 Mayeenul Islam

CSS属性可以通过jQuery/javascript访问 - http://api.jquery.com/css/ – 2013-04-18 05:18:11

您的问题有几种解决方案。这里仅仅是少数许多：

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-18 06:39:57 asifrc

如何协调jQuery和CSS？

回答

相关问题