<img id='imgID' src='../images/some_image.png'>
#JS
document.getElementById('imgID').style.transform = "rotate(90deg)"
출처 : https://stackoverflow.com/questions/16794310/rotate-image-with-javascript
#jQuery
$('#imgID').css({'transform':'rotate(90deg)'})
출처 : https://okky.kr/articles/681005
아래와 같이 jsonVal이라는 데이터가 있다고 가정하고
jsonVal = [
{name:'사과',price:100},
{name:'자두',price:50},
{name:'포도',price:200},
]
jsonVal에서 '사과'의 price를 찾고 싶을경우 아래와 같이 사용할 수 있다.
jsonVal.filter(
function(e){
return e.name == '사과'
}
)[0].price
특정 이미지 아이콘에서 설정된 변수에 따라 아이콘의 색상이 변하는 기능을 구현하고자 한다.
기존 jpg, png등은 이미지파일을 미리준비해야 했지만 svg를 쓰면 아이콘의 색상을 바꾸는 것이 가능하다.
(그리고 아이콘의 모양을 실시간으로 변경하는 것 또한 가능은하다)
여기에 생성된 svg가 있다
var svg = '';
svg += "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
svg += "<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\n";
svg += "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n";
svg += " y=\"0px\" viewBox=\"0 0 24.7 21.6\" style=\"enable-background:new 0 0 24.7 21.6;\" xml:space=\"preserve\">\n";
svg += "<style type=\"text/css\">\n";
svg += " .st0{fill:#" + color + ";}\n";
svg += " .st1{fill:#FFFFFF;}\n";
svg += "</style>\n";
svg += "<path class=\"st0\" d=\"M6.7,1.6L2.6,7.1H5c0.6,0,1,0.4,1,1V20h12.7V8.1c0-0.6,0.4-1,1-1h2.4l-4.1-5.5H6.7z\"/>\n";
svg += "<path class=\"st1\" d=\"M6.5,1.2L1.8,7.5H5c0.3,0,0.6,0.3,0.6,0.6v12.3h13.5V8.1c0-0.3,0.3-0.6,0.6-0.6h3.2l-4.7-6.3H6.5z M19.7,7.1\n";
svg += " c-0.6,0-1,0.4-1,1V20H6V8.1c0-0.6-0.4-1-1-1H2.6l4.1-5.5h11.4l4.1,5.5H19.7z\"/>\n";
svg += "<path d=\"M24.6,7.7l-5.6-7.5C18.9,0.1,18.8,0,18.6,0H6.2C6,0,5.8,0.1,5.7,0.2L0.1,7.7C0,7.9,0,8.1,0.1,8.3s0.3,0.3,0.5,0.3h3.8V21\n";
svg += " c0,0.3,0.3,0.6,0.6,0.6h14.7c0.3,0,0.6-0.3,0.6-0.6V8.7h3.8c0.2,0,0.4-0.1,0.5-0.3S24.8,7.9,24.6,7.7z M19.7,7.5\n";
svg += " c-0.3,0-0.6,0.3-0.6,0.6v12.3H5.6V8.1c0-0.3-0.3-0.6-0.6-0.6H1.8l4.7-6.3h11.8l4.7,6.3H19.7z\"/>\n";
svg += "</svg>\n";
이 svg는 실시간으로 생성되는 값이며 svg값을 <img src=에 적용하려고 한다.
src에 아래와 같이 적용해주면 된다.
"data:image/svg+xml;base64," + window.btoa(svg);
중요한 것은 svg의 소스를 base64로 변환해야 하며 btoa()가 base64로 변환해준다.
"data:image/svg+xml;base64," 이구문도 반드시 추가해야한다.
<script type="text/javascript">
var num = 3.14;
// 그대로 출력
document.write(num, '<br />');
// 출력 결과: 3.14
// 소수점 이하 6자리로 강제로 출력
document.write(num.toFixed(6), '<br />');
// 출력 결과: 3.140000
num = 3.1415926535897932384626433832795;
// 그대로 출력
document.write(num, '<br />');
// 출력 결과: 3.141592653589793
// 소수점 이하 3자리로 출력
document.write(num.toFixed(3), '<br />');
// 출력 결과 (반올림됨): 3.142
</script>
※출처 : http://mwultong.blogspot.com/2007/08/javascript-tofixed.html
자바스크립트에서 숫자가 0.02555555555555555555555555555555와 같이 나올때
이숫자를 0.03으로 변경할때 사용한다.
숫자가 지정된 변수에 val.toFixed(2);로 사용한다.
function IE_Ver()
{
if(navigator.appName.match(/Explorer/i))
{
return navigator.appVersion.match(/MSIE \d+.\d+/)[0].split(" ")[1];
}
else return 0;
}
function getInternetExplorerVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
위 두가지가 있다. 비슷비슷한놈이다.
위의 놈은 익스버전을 6.0,7.0과같은 형태로 반환하고 익스가 아닌브라우저는 0로 반환한다.
아랫놈은 익스버전을 6,7,8과 같은 형태로 반환하고 익스가 아닌 브라우저는 -1로 반환한다.
진짜 간단한건데 이렇게 기억이 나지 않을때가 있다.
document.getElementById('RadioID').checked;
다른 예제를 찾아보면 class나 name으로 지정하는 방법은 많지만 id로 지정하는 방법은 유독나와있지 않은 데다가
jQuery로는 더 찾기 힘들다. 귀찮아서 그냥 자바스크립트로 처리한 경우다.
var embed = document.getElementsByTagName('embed');
for(var i = 0; i < embed.length; i++){
embed[i].setAttribute('wmode','opaque');
}
// FF does a "live" array when working directly with elements,
// so "els" changes as we add/remove elements; to avoid problems
// with indexing, copy to a temporary array
var els = document.getElementsByTagName('object');
var obj = [];
for(var i = 0; i < els.length; i++){
obj[i] = els[i];
}
for(var i = 0; i < obj.length; i++){
var param = document.createElement('param');
param.setAttribute('name','wmode');
param.setAttribute('value','opaque');
obj[i].appendChild(param);
var wrapper = document.createElement('div');
obj[i].parentNode.appendChild(wrapper);
if(obj[i].outerHTML){
// IE
var html = obj[i].outerHTML;
obj[i].parentNode.removeChild(obj[i]);
wrapper.innerHTML = html;
}else{
// ff/chrome
obj[i].parentNode.removeChild(obj[i]);
wrapper.appendChild(obj[i]);
}
}
출처 : http://stackoverflow.com/questions/534474/changing-arbitrary-flash-objects-wmode-to-transparent
플래시객체를 웹에서 사용했을 경우 플래시객체 상위레이어로 html 객체가 올라가야하는 경우가 있는데 도통 방법을 못찾다가
찾은 방법이다. 문서내의 embed객체를 일괄로 적용하는 방법인 듯 하다.
