고난의 연속이다...
각 button마다 다른 색을 부여하여 hover할 때와 active할 때마다 색을 바꾸고 싶었다. 문제는 버튼을 클릭했을 때 css실행이 안된다..
마침 css가 너무 길어서 이를 효율적으로 할 수 있는 방법이 있나 하여 javascript를 찾아 보았는데 방법을 찾긴 하였으나.. 너무 번거로워보인다. 이래서는 이유가 없다..
function changecolor(적용하고자 하는 개체의 ID) {
let elements = document.getElementById(적용하고자 하는 개체의 IDl).style.backgroundColor = "yellow";
}이렇게 하려고 했는데.. background color 따로 opacity 따로인거같은데.. 너무 번거롭다.
그래서 찾은 것이 ajax이다.
<script>
$(function(){
$("#test").css({
"color": "blue",
"font-size": "25px"
});
});
</script>그냥 html에 스타일을 추가하는 방식이라는데 css로 하는게 더 낫다는 이야기도 있다..
<div id="test2">test2</div>
<script>
document.head.appendChild(document.createElement("style"));
var styleSheets = document.styleSheets;
styleSheets[styleSheets.length-1].addRule("#test2", "color: red;font-size: 25px;");
</script>이건 add rule이라고 새로운 규칙을 추가하는 거라고 하는데
내가 찾는 것은 미리css를 구현해 놓고 그걸 ajax나 javascript로 그때그때 가져오는거였는데.. 음 이게 더 복잡한건가 싶기도 하다.
계속 고민해서 내일까지는.. 제출할 수 있도록 해야겠다.
아니면 아예 처음으로 돌아가서 css로 100% 구현 가능하게 해야겠다. css가 제일 낫다는 이야기가 꽤 있다.
