2012-09-10 3 views
1

a 요소와 p 요소의 글꼴 크기를 늘리고 싶지만 그 자체로 글꼴을 증가시키는 요소는 앵커 요소이므로 언론, 그러나 이것은 거짓이며 일어날 수 없습니다.jquery로 앵커 요소 자체의 크기를 늘리고 싶지 않다.

는 HTML : 분명히 행운과

var elm = $('p, a:not("a.fontSizePlus")'); 

:

<div class="fontsize"> 
<a class="fontSizePlus" href="#">A+</a> 
| 
<a class="fontReset" href="#" style="font-size: 17px;">Reset</a> 
| 
<a class="fontSizeMinus" href="#" style="font-size: 17px;">A-</a> 
</div> 

지금까지 나는 같은 다양한 대상 솔루션을 시도했다.

jQuery를 :

<script type="text/javascript"> 
$(document).ready(function() { 

    //min font size 
    var min=9; 

    //max font size 
    var max=16; 

    //grab the default font size 
    var reset = $('p').css('fontSize'); 

    //font resize these elements 
    var elm = $('p, a:not("a.fontSizePlus")'); 

    //set the default font size and remove px from the value 
    var size = str_replace(reset, 'px', ''); 

    //Increase font size 
    $('a.fontSizePlus').click(function() { 

     //if the font size is lower or equal than the max value 
     if (size<=max) { 

      //increase the size 
      size++; 

      //set the font size 
      elm.css({'fontSize' : size}); 
     } 

     //cancel a click event 
     return false; 

    }); 

    $('a.fontSizeMinus').click(function() { 

     //if the font size is greater or equal than min value 
     if (size>=min) { 

      //decrease the size 
      size--; 

      //set the font size 
      elm.css({'fontSize' : size}); 
     } 

     //cancel a click event 
     return false; 

    }); 

    //Reset the font size 
    $('a.fontReset').click(function() { 

     //set the default font size 
     elm.css({'fontSize' : reset});  
    }); 

}); 

//A string replace function 
function str_replace(haystack, needle, replacement) { 
    var temp = haystack.split(needle); 
    return temp.join(replacement); 
} 
</script> 
+1

당신은 이것을 위해 바이올린을 만들 수 있습니까? – Asciiom

답변

0

나는 여기에 바이올린에 대한 링크가

http://jsfiddle.net/mkyzP/

을 설정하여이야 난 완전히 당신이 ...

요구하는지 이해 확실하지 않다

모두 제대로 작동하는 것 같습니다.

당신은

var elm = $('p, a:not("a.fontSizePlus")'); 

var elm = $('p, a:not("a.fontSizePlus, a.fontReset, a.fontSizeMinus")'); 

에 따라서 링크의 아무도 축소하거나 성장을 변경할 수 있는지 확인해야합니다.

또는 태그를 span 태그로 변경할 수 있습니다.

관련 문제