jQuery의 border-bottom-width

Question

jQuery를 사용하여 테두리 너비를 설정하려고하므로 스크린 크기로 조정됩니다.

$("#content").css("border-bottom-width", "(1/20)*theHeight", "border-right-width", "(1/10)*theWidth", "border-left-width", "(1/10)*theWidth", "border-top-width", "0"); 

하지만이 트릭을 할 것 같지 않습니다

은 내가 지금 사용하고 같습니다. 나는 theHeight와 theWidth 값이 채워져있어 문제가 될 수 없다는 것을 안다.

내가 뭘 잘못하고 있니? 진짜로 절름발이의 버그라면, 그런 멍청한 놈이 된 것에 대해 정말 유감입니다.

Answer 1

은 다음과 같이해야합니다

$("#content").css({"border-bottom-width": (1/20)*theHeight, "border-right-width": (1/10)*theWidth, "border-left-width": (1/10)*theWidth, "border-top-width": 0}); 

문제는 잘못된)합니다 (CSS를 사용하여 무엇보다도 먼저, 당신이있어 것입니다. 둘 이상의 CSS 속성이있는 경우 objet {key : value, key : value}로 만들어야합니다. 둘째, 변수와 계산을 따옴표로 묶어 넣으면 그 결과는 단순한 텍스트가됩니다.

Answer 2

따옴표에서 잘못된 형식의 값이 때문입니다, 그냥 따옴표를 제거하고 인수이 같은 오브젝트합니다 object literal에 대한

$("#content").css({"border-bottom-width": (1/20)*theHeight, 
        "border-right-width": (1/10)*theWidth, 
        "border-left-width": (1/10)*theWidth, 
        "border-top-width": 0}); 

형식은 항상 { key: value, key2: value2 }입니다. border-bottom-width은 유효한 키가 아니기 때문에 (-로 인해) 안전하게 보관하려면 키를 인용하십시오. 그러나 "border-bottom-width"은 문제가 없습니다. 또한이처럼, 그것을 조금 단순화 할 수 있습니다 :

$("#content").css({"border-bottom-width": theHeight/20, 
        "border-right-width": theWidth/10, 
        "border-left-width": theWidth/10, 
        "border-top-width": 0}); 

Answer 3

"(1/20)*theHeight" 

가이되지 않습니다 :

((1/20)*theHeight) 

그래서 이런 식으로 작업을 수행합니다

.css({"border-bottom-width": (1/20)*theHeight, 
        "border-right-width": (1/10)*theWidth, 
        "border-left-width": (1/10)*theWidth, 
        "border-top-width": 0});