如何協調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？

回答

相關問題