반응형
jquery를 사용하여 CSS를로드하는 방법
서버에 CSS 파일을로드 했으므로 URL이 있습니다. JQuery를 사용하여 펄 코드에서 어떻게로드 할 수 있습니까?
그래서 현재 나는 다음과 같은 페이지에서 누락 된 내 메이슨 페이지의 CSS를 하드 코딩하고 있습니다.
JQ.onReady('show', function(){
JQ.addStyles({styles: ["\n\n.ap_classic { border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #2F2F1D; border-right:1px solid #2F2F1D;background-color:#EFEDD4;padding:3px; } .ap_classic .ap_titlebar { color:#86875D;font-size:12px;padding:0 0 3px 0;line-height:1em; } .ap_classic .ap_close { float:right; } .ap_classic .ap_content { clear:both;background-color:white;border:1px solid #ACA976;padding:8px;font-size:11px; } "]});
});
이 CSS를 하드 코딩하는 것을 피하고 싶습니까?
섹션에 <link/>요소를 삽입 할 수없는 이유를 <head/>모르겠지만 여기에 jQuery 스 니펫이 있습니다.
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
다시 말하지만 동적으로로드하는 CSS 스타일 시트는 IE에서 작동하지 않습니다 .
href 속성을 마지막으로 설정하고 링크 elem이 헤드에 추가 된 후에 만 설정해야합니다.
$('<link>')
.appendTo('head')
.attr({
type: 'text/css',
rel: 'stylesheet',
href: '/css/your_css_file.css'
});
$(document).ready(function(){
console.log("ready!");
var e=$("<link>",{
rel:"stylesheet",
type:"text/css",
href:"/your/css/file.css"})[0];
e.onload=function(){
console.log("CSS IN IFRAME LOADED")},
document.getElementsByTagName("head")[0].
appendChild(e)});
나는 언어와 파일 유형에 대해 일관성있는 것을 좋아합니다 (예 : CSS와 html을 섞지 마십시오). 그래서 style.css 파일을 만들고 jQuery를 사용하여 태그에로드합니다.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<style id="import"></style>
<h2 class="red">this is red</h2>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$( "#import" ).load( "./style.css" );
});
</script>
</body>
</html>
style.css
.red{
color: red;
}
ReferenceURL : https://stackoverflow.com/questions/3913359/how-to-load-css-using-jquery
반응형
'programing' 카테고리의 다른 글
| 프로그램 종료 전에 코드를 실행하는 방법은 무엇입니까? (0) | 2021.01.18 |
|---|---|
| Xcode에 시스템 헤더 검색 경로 추가 (0) | 2021.01.18 |
| jQuery를 사용하여 화면 밖으로 div 슬라이드 (0) | 2021.01.18 |
| "IllegalArgumentException : 매개 변수는이 뷰의 하위 항목이어야합니다."오류 방지 / 캐치 (0) | 2021.01.18 |
| 상자 그림자가있는 CSS 말풍선 (0) | 2021.01.18 |