html 스타일쉬트조작하기

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 스타일쉬트조작하기相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
<style type="text/css">
<!--
#foo {
	padding: 10px;
    background: #fff;
    border: solid 10px #ff0000;
    color: #ff0000;
    font-style: italic;
}
-->
</style>
</head>
<body>
	<button class="replace">Style 변형</button>
	<button class="restore">복구</button>
	<div id="foo">
	   123
	</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
<!-- //
$.fn.getStyleObject = function(){
    var dom = this.get(0);
    var style;
    var returns = {};
    if(window.getComputedStyle){
        var camelize = function(a,b){
            return b.toUpperCase();
        }
        style = window.getComputedStyle(dom, null);
        for(var i = 0, l = style.length; i < l; i++){
            var prop = style[i];
            var camel = prop.replace(/\-([a-z])/, camelize);
            var val = style.getPropertyValue(prop);
            returns[camel] = val;
        }
        return returns;
    }
    if(dom.currentStyle){
        style = dom.currentStyle;
        for(var prop in style){
            returns[prop] = style[prop];
        }
        return returns;
    }
    if(style = dom.style){
        for(var prop in style){
            if(typeof style[prop] != 'function'){
                returns[prop] = style[prop];
            }
        }
        return returns;
    }
    return returns;
}

$(document).ready(function(){
	var style = $("#foo").getStyleObject();
    $("button.replace").click(function(){
    	$("#foo").css({
		    'border' : 'solid 10px #0000ff',
		    'color' : '#0000ff',
		    'font-style' : 'normal'
	    });
    });
    $("button.restore").click(function(){
    	$("#foo").css(style);
    });
});
// -->
</script>
</html>

以上是关于html 스타일쉬트조작하기的主要内容，如果未能解决你的问题，请参考以下文章

html 反应内联风格（리액트인라인스타일）

javascript 소녀나라스타일 - 갤러리위젯（리뷰작성일노출）

css 소녀나라스타일 - 갤러리위젯（리뷰작성일미노출）

javascript 마우스오른쪽클릭，복사하기，붙여넣기，잘라내기방지하는스크립트

css 베스트위젯상하단이미지작업

python Flask API를테스트하기위한아이디어