반응형
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
반응형
'programing' 카테고리의 다른 글
파일 이름에서 확장자를 제거하는 쉬운 방법? (0) | 2021.01.17 |
---|---|
여러 줄 TextBox에 줄을 추가하는 방법은 무엇입니까? (0) | 2021.01.17 |
OpenGL ES 2.0 다중 프로그램 또는 다중 셰이더 또는 무엇입니까? (0) | 2021.01.16 |
'ws : // xxx : nn'에 대한 WebSocket 연결 실패 : 핸드 셰이크 응답을 받기 전에 연결이 종료 됨 '오류를 잡는 방법? (0) | 2021.01.16 |
단일 어셈블리 다국어 Windows Forms 배포 (ILMerge 및 위성 어셈블리 / 지역화)-가능합니까? (0) | 2021.01.16 |