자바 스크립트로 URL을 감지하여 CSS를 적용하십시오.

그래서 일부 CSS를 적용하려는 페이지가 있지만 CMS에 의해 동적으로 생성됩니다. URL은 일정하게 유지되므로 원하는 페이지에 CSS를 추가하기 위해 템플릿 파일의 머리 부분에 붙여 넣을 수는 있지만 작동하지 않습니다. 오류가 발생하는 것 같습니다 곳이기로자바 스크립트로 URL을 감지하여 CSS를 적용하십시오.

<script type="text/javascript"> 
jQuery(document).ready(function() { 
if(window.location.href.indexOf("/products.html")) 
{ 
document.write("<style type=\"text/css\"> 
.category-grid li:nth-child(4) 
{ 
margin-left:115px; 
} 
</style>"); 
} 
}); 
</script>

내 document.write 문에 아마 구문이 꺼져,하지만 난 그것을 알아낼 수 없습니다. 어떤 아이디어?

출처

2012-03-12 miles

백엔드가 이렇게하지 않는 것처럼 보입니다. – epascarello

바보입니다. Magento입니다. – miles

스크립트가 포함되지 않도록 문맥 적 CSS를 작성할 수있는 방법이 없습니까? – Henry

견적이 제대로 종료되지 않았습니다.

또한 이 아닌은 document.write이 아닙니다. 현재 문서를 덮어 씁니다. 또한 indexOf의 결과와 -1의 결과를 비교하십시오. 하위 문자열이 발견되지 않으면 !!-1이 참이므로 이전 코드는 계속 스크립트를 삽입합니다.

코드는이 방법으로 해결할 수 있습니다 : 당신은 jQuery를 "준비"핸들러에서 document.write()을 사용할 수 없습니다

<script> 
if (location.href.indexOf("dev.obtura.com/products.html") !== -1) { 
    document.write("<style>" + 
    ".category-grid li:nth-child(4){" + 
    " margin-left:115px;" + 
    "}" + 
    "</style>"); 
} 
</script>

출처

2012-03-12 15:51:49

. 브라우저가 DOM ("준비 됨"핸들러가 암시하는 것) 빌드를 완료 한 후 document.write을 호출하면 페이지가 삭제됩니다.

대신에 당신은 당신이 항상 포함 것 일부 CSS 규칙을 사용하는 것입니다 무엇을 할 수 있는지, 있다는 일을

하지만 몸 클래스에 의해 자격 :

.products .category-grid li:nth-child(4) { 
    margin-left: 115px; 
}

그런 다음 스크립트를 추가합니다 "제품 "id가 올바른 페이지라고 결정하면 요소의 클래스 인 <body>에 전달됩니다.

출처

2012-03-12 15:52:40 Pointy

아하,이 대답을 보지 못했습니다. 이런 식으로 온건함을 위해서 제발. – Henry

아마 yepnope.js에 만족합니다. 이를 통해 동적으로로드 할 CSS 또는 JS를 선택할 수 있습니다. 이러한이

yepnope({ 
    test : function(){return window.location.href.indexOf("dev.obtura.com/products.html") === -1}, 
    yep : 'style.css', 
    nope : 'products.css' 
})

출처

2012-03-12 15:54:01 HerrSerker

로

당신의 CSS 스타일은 당신이 jQuery의 APPEND 방법 대신 document.write

<script> 
if (location.href.indexOf('dev.obtura.com/products.html') != -1) 
{ 
    //match! 
    $('head').append('<link rel="stylesheet" type="text/css" href="your_stylesheet.css">'); 
} 
</script>

HTH의 사용할 수있는 스타일 시트 파일 내부에 저장되어있는 경우,

--hensson

출처

2012-03-12 16:05:28 hennson

분명히 이런 식으로 할 수는 있지만 생각하지 않습니다. 그것을하는 좋은 방법입니다. 이것을하는이 방법은 유지하고 읽는 고통 같이 보인다. 내가 생각할 수있는 몇 가지 더 나은 방법 :

은 해당 페이지에 정적 스타일 태그를 추가 단지 문서
에 대한 CSS 선택기를 적용하는 데 사용할 수있는 문서에 추가 클래스를 추가
jQuery를 사용하여 적용하려면 다음과 같이하십시오 (테스트하지는 않았지만 닫아야 함) :

$ ('category-grid li : nth-child (4)') css ('margin- 왼쪽 ','115px ')
yunzen 's yepnope 사용 제안.

출처

2012-03-12 16:08:21

자바 스크립트로 URL을 감지하여 CSS를 적용하십시오.

답변

관련 문제