jQuery와 CSS를 조정하는 방법은 무엇입니까?

Question

테두리 이미지와 관련하여 previous assistance을 사용하여 맞춤 프레임을 올바르게 만들었습니다.

<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 : 인라인 CSS와

HTML : 여기

내 코드입니다 :
다음은 간단합니다

.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/> 속성은 아닙니다.

시도했습니다. THIS ONE입니다. 여기

문제를 온다 :

내가 CSS 속성을 jQuery를 조정할 수있는 방법
• ?

프레임의 각 유형에 대해 별도의 CSS 클래스를로드하는 것이 하나의 일입니다. 그러나 진행 방법을 이해할 수는 없습니다.

아무도 없습니까?

Answer 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 솔루션은 가장 세련된 솔루션이므로 모든 스타일은 동일하게 유지되며 수업 만 처리하면됩니다. 이 모든 것이 의미가 있고 이것이 도움이 되었으면 알려주세요 :)