나는 다음 코드로 div - 요소에 CSS 속성을 검색 할 수 없습니다 해요 :JavaScript로 CSS 속성에 액세스 할 수없는 이유는 무엇입니까?
function myFunction() {
console.log(
document.getElementById("myDiv").style.borderTopColor
);
}div {
border-top-width: 15px;
border-top-color: green;
}<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">Return top border color</button>이 다른 사람의 의견과 답변을 결합하여 사용할 필요가 인라인 정의되지 않은 스타일을 얻기를 위해 또한 border-top: 15px solid green;
를 사용할 수 있습니다. 자세한 내용은 참조 할 수 있습니다. alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style>
div
{
border-top-width: 15px;
border-top-color: green;
border-top-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return top border color</button>
<script>
function myFunction() {
alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);
}
</script>
</body>
</html>border-top-style: solid;
두 변경은 이
당신은 국경에 스타일을 설정하지 마십시오. 기본적으로 none입니다. Border-top-style
또는 당신은 또한 당신이 window.getComputedStyle
div
{
border-top-width: 15px;
border-top-color: green;
border-top-style: solid;
}<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return top border color</button>
<script>
function myFunction() {
var elem = document.getElementById("myDiv");
var style = window.getComputedStyle(elem, null);
alert(style.borderTopColor);
}
</script>
</body>
</html>코드가 예상대로 작동하지 않습니다. –
@ c-smile 내 대답을 편집했습니다. – David
getComputedStyle을 사용하여 속성 값을 가져옵니다. 또한 스타일을 지정하지 않으면 테두리가 표시되지 않습니다.
아래의 조각은
function myFunction(elem) {
var elem1 = document.getElementById(elem);
var style = window.getComputedStyle(elem1, null);
var getBorderTop = style.getPropertyValue("border-top-color")
console.log(getBorderTop);
}div {
border-style: solid;
border-top-width: 15px;
border-top-color: green;
}<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction('myDiv')">Return top border color</button>그것은이 here
뭔가를 시도 재생
function myFunction() {
alert(window.getComputedStyle(document.getElementById("myDiv")).borderTopColor)
}
해야 RGB 형식으로 색상 코드를 반환합니다 이 같은 g : 여기
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mystyle
{
border-top: 15px solid green;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return top border color</button>
<script>
function myFunction() {
document.getElementById("myDiv").className = "mystyle";
}
</script>
</body>
</html>
작동하는 대답을 다운 그레이드하는 이유가 확실하지 않습니다. –
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
border: thick solid blue;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Change color of the top border</button>
<script>
function myFunction() {
alert(document.getElementById("myDiv").style.borderTopColor = "red");
}
</script>
</body>
</html>
은 위쪽 테두리 색상을 변경하기위한 올바른 것입니다.
스타일 태그에 스타일 소품을 정의 할 때마다 코드를 변경할 수있는 권한이 있습니다. 코드에 지정된대로 스타일 소품을 올바르게 정의하십시오.
위의 코드를 이해하시기 바랍니다. 만약 어떤 쿼리 u는
왜냐하면'element.style.whatever'는 스타일 시트의 결과 인 계산 된 스타일이 아닌 요소에 인라인 스타일을 반환하기 때문에 ... 당신이'getComputedStyle (document. getElementById ("myDiv")).borderTopColor' –
"_not working_"을 정의하십시오. – Teemu
div의 css 속성이 작동하지 않는다는 말로 작업을 정의하지 않았습니다. 즉, 테두리 나 너비가 표시되지 않습니다. – thirstForKnowledge