programing

CSS 너비 : calc (100 % -100px);

itsource 2021. 1. 17. 10:51
반응형

CSS 너비 : calc (100 % -100px); jquery를 사용하는 대안


width: calc(100% -100px);필요한 작업을 완벽하게 수행하는 것을 사용하고 싶습니다 . 유일한 문제는 호환성입니다. 현재로서는 최신 브라우저에서만 작동하며 Safari에서는 전혀 작동하지 않습니다.

jQuery를 사용하여 대안을 만들 수 있습니까? 즉. 개체의 100 % 너비 -100px를 얻은 다음 결과를 CSS 너비로 동적으로 설정합니다 (따라서 응답 성이 있음).


calc표현식을 지원하지 않는 브라우저가있는 경우 jQuery로 모방하는 것이 어렵지 않습니다.

$('#yourEl').css('width', '100%').css('width', '-=100px');

jQuery가 상대 계산을 직접 처리하도록하는 것이 훨씬 쉽습니다.


나는 이것이 다른 방법이라고 생각합니다

    var width=  $('#elm').width();

    $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });

100 % -100px는 동일합니다.

div.thediv {
  width: auto;
  margin-right:100px;
}

jQuery 사용 :

$(window).resize(function(){
  $('.thediv').each(function(){
    $(this).css('width', $(this).parent().width()-100);
  })
});

비슷한 방법은 jQuery 크기 조정 플러그인 을 사용하는 것입니다.


animate()예를 들어 jQuery 방법을 사용해보십시오 .

$("#divid").animate({'width':perc+'%'});

javascript :-) 복제하기가 어렵지 않지만 너비와 높이에 대해서만 가장 잘 작동하지만 기대에 따라 확장 할 수 있습니다 :-)

function calcShim(element,property,expression){
    var calculated = 0;
    var freed_expression = expression.replace(/ /gi,'').replace("(","").replace(")","");
    // Remove all the ( ) and spaces 
    // Now find the parts 
    var parts = freed_expression.split(/[\*+-\/]/gi);

    var units = {
        'px':function(quantity){
            var part = 0;
            part = parseFloat(quantity,10);
            return part;
        },
        '%':function(quantity){
            var part = 0,
            parentQuantity = parseFloat(element.parent().css(property));
            part = parentQuantity * ((parseFloat(quantity,10))/100);
            return part;
        } // you can always add more units here.
    }

    for( var i = 0; i < parts.length; i++ ){
        for( var unit in units ){
            if( parts[i].indexOf(unit) != -1 ){
               // replace the expression by calculated part.
               expression = expression.replace(parts[i],units[unit](parts[i]));
               break;
            }
        }
    }
    // And now compute it. though eval is evil but in some cases its a good friend.
    // Though i wish there was math. calc
    element.css(property,eval(expression));
}

CSS 파일에서 calc를 사용하려면 PolyCalc와 같은 polyfill을 사용하십시오 . 모바일 브라우저에서 작동하기에 충분히 가벼워 야합니다 (예 : iOS 6 이하 및 Android 4.4 휴대폰).

참조 URL : https://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery

반응형