이것은 기본적인 질문 일 수 있지만 자바에서 수평선 (예 : 수평선 규칙)을 만드는 방법은 html <hr> 태그와 유사합니까? <hr> 태그가 허용하는 것과 똑같은 색과 두께를 설정할 수 있기를 원합니다.JS를 사용하여 수평선을 그리기
여기에 <script> 태그와 함께 필요한 웹 사이트가 있습니다 (일부 코드 포함). 일부 사용자는 JS를 사용할 수 없으므로 <hr>을 사용할 수 없습니다. 그래서 그 (것)들을 위해 <script> 꼬리표 내용의 아무도는 보여줄 것이다, 그러나 <hr>는 아직도 보여줄 것이다 (나는 그것을 일어나기 위하여 원하지 않는다). 첫 번째 문제, 태클
: 내 사용자 중 일부는 JS가 활성화되지 않기 때문에
(당신이 IE 9 지원이 필요하지 않은 경우내가
<hr>을 사용할 수 있습니다; 그래서 그 (것)들을 위해<script>꼬리표 내용의 아무도는 보여줄 것이다, 그러나<hr>는 아직도 보여줄 것이다 (나는 그것을 일어나기 위하여 원하지 않는다).
classList로) 당신은 자바 스크립트에
<html> 요소에 클래스를 추가 할 수 있습니다
:
document.documentElement.className += ' has-js';
을 다음 자바 스크립트를 지원하지 않는 한 <hr>를 표시하지 스타일 :
<hr class="hey-that’s-my-line" />
.hey-that’s-my-line {
display: none;
/* change its height & colour here */
}
html.has-js .hey-that’s-my-line {
display: block;
}
지금, 당신의 질문에 대답 : 당신은 요소를 작성하고 내가 할 수 DOM API를 사용하여 DOM API를 문서에 삽입하십시오. 이 답변에서 전적으로 다루는 내용이 약간 있지만 MDN은 a good introduction입니다. 당신은 그냥 자바 스크립트를 사용하여 페이지에 HR 요소를 만들려면 다음과 같이
var hr = document.createElement('hr');
document.body.appendChild(hr); // inserts it at the end of <body>;
// appendChild() inserts at the end of any node,
// generally
var ref = document.getElementById('reference-point');
ref.parentNode.insertBefore(hr, ref); // inserts it before the element
// with the id 'reference-point'
, 그것은이다 :
elem = document.createElement("hr"); //this will create a new element
/* Use setAttribute to define the property and values you'd like give the element */
elem.setAttribute("width", "100px");
/* Then you'll need to add the element to the page */
document.body.appendChild(elem);
당신은 NOSCRIPT 사용자로부터 숨길 일부 CSS와 표준 <hr> 요소를 사용할 수 있습니다.
이것 좀보세요 : http://arsdnet.net/testo.html 자바 스크립트 사용 여부 여기 코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title>Noscript example</title>
<style>
/* this css is used by people with and without javascript */
/* a <link> tag would work as well, of course */
</style>
<noscript>
<style>
/* this is only visible by people without JS enabled */
hr {
display: none;
}
</style>
</noscript>
<script>
/* And this script only runs with JS (obviously) so by adding
a class name to the root element (<html>), we can also detect
it in CSS....
*/
document.documentElement.className += " with-js";
</script>
<style>
/* ...meaning we can target it with CSS like this too: */
html.with-js hr {
color: red;
}
</style>
</head>
<body>
Hi, before hr
<hr />
After hr
</body>
</html>
<noscript> 태그는 절대로 안돼요 뒤쪽에서 유효한 HTML과 모든 곳에서 작동합니다. 그 안의 모든 것은 스크립트를 지원하지 않는 사람들에게만 보이며 fallback html, 링크 태그, 스타일 태그 등 어떤 내용이라도 저장할 수 있습니다.
스타일 태그를 넣어서 CSS가 아닌 스크립트 사용자가 보지 못하도록하는 요소를 숨길 수 있습니다.
그렇다면 모든 사용자가 정상적으로 볼 수있는 일반 HTML을 작성합니다. 거기에는 특별한 것이 없습니다. 그런 다음 <noscript><style>을 사용하여 특수한 경우로 스크립트없이 사람들을 위해 수정합니다.
때때로 btw가 아닌 스크립트 사용자의 것만 숨기는 대신 스크립트 사용자에게만 표시하고 싶을 수도 있습니다. 가장 쉬운 방법은 javascript를 사용하여 html 요소에 클래스를 붙여 넣은 다음 CSS를 사용하여 그 클래스 이름 자손을 대상으로 지정하는 것입니다. 샘플의 다음 몇 줄은이를 보여줍니다. 다시 말하지만, 일반 HTML을 작성한 다음 사실을 수정 한 후이 시간에 <script>을 조합하여 클래스를 추가하고 <style>을 대상으로 지정하십시오.
JS로이 페이지를 보면 빨간색 hr가 표시됩니다. JS가 없으면 시간이 표시되지 않습니다.
''을 'display : none;'과 함께 사용하여 '
@ AdamD.Ruppe : 사과, 나는 실제로 그것에 대해 알지 못합니다. 답변으로 추가 할 수 있습니까? – Sophia111
샘플에 몇 가지 기술로 답변했습니다. 일반적으로 말해서, 나는 항상 원하는대로 작동하는 단순하고 간단한 HTML을 작성한 다음 나중에 javascript, css 또는 noscript 요소를 사용하여 특수한 경우를 설명하도록 사용자 정의합니다. 그렇게하면 읽기 쉬운 소스 코드와 좋은 호환성을 제공하는 경향이 있습니다. 기본 HTML은 사실상 모든 사람들을 위해 작동합니다! –