몇 가지 비디오 전에 요소를 선택하고 조작하는 개념을 도입했습니다.
그래서 우리는 H1 또는 모든 이미지 태그를 선택한 다음 색상을 변경하거나 애니메이션을 적용하거나 클릭 할 때 무언가를 할 수 있습니다.
지금까지 우리는 절반과이 비디오를 선택하는 것을 다루었습니다.
일단 요소를 선택하면 요소를 조작하는 여러 가지 방법 중 몇 가지를 소개 할 것입니다.
여기 제가 이야기하고 싶은 네 가지 주요한 것들이 있습니다.
첫 번째는 요소 스타일을 어떻게 바꿀 것인가입니다.
우리는 그것을 어떻게 파란색으로 만들거나 숨길 수 있습니까?
글꼴 크기를 변경하십시오.
다음은 자바 스크립트로 클래스를 추가하고 제거한 다음 태그의 내용을 변경하는 방법에 대해 설명하겠습니다.
그렇다면 예를 들어 H-1 태그 내부의 텍스트를 어떻게 변경합니까?
그리고 마지막으로 속성을 변경합니다.
그렇다면 이미지 태그의 소스 또는 AA 태그의 참조를 어떻게 변경합니까?
스타일 속성에 대해 이야기하면서 시작하겠습니다.
따라서 DOM이 생성되고 개별 노드가 만들어 지거나 모든 단일 요소에 대해 객체가 만들어지면 style이라는 속성이 있고 style 속성은 설정할 수있는 모든 단일 CSSA 속성에 대해 수백 개의 속성을 가진 거대한 객체입니다.
그래서 우리는 스타일과 요소가 다르게 갈 자바 스크립트를 작성할 수 있습니다.
그래서 여기에서 Id 강조 표시로 요소를 선택하므로 태그라는 변수에 저장 한 다음 조작합니다.
그리고 내가하고있는 일은 내가 정하고있다.
도트 스타일 도트 색상을 파란색 태그 도트 스타일 점 테두리로 태그 지정하면 10 픽셀이 빨간색으로 고정됩니다.
오른쪽이 문자열이어야한다는 점에 유의해야합니다.
따라서 C S에서 우리는 파란색 또는 약 70 P x 주위에 따옴표를 넣을 필요가 없습니다.
이것은 C Ss가 아닙니다.
이것은 자바 스크립트입니다.
그래서 우리는 여전히 규칙적인 자바 스크립트 규칙을 따라야합니다.
그래서 간단한 웹 페이지 설정을 통해 이러한 속성 중 일부를 보여줍니다.
따라서이 웹 페이지는 그 단락 대신 하나의 단락을 가진 H-1 단 하나의 슈퍼 단편입니다.
강력한 태그가 있고 두 개의 사랑스러운 코기 믹스 이미지가 두 개 있습니다.
그래서 제가 할 일은 영사관에 ​​가서 뭔가를 선택하는 것부터 시작해야합니다. 그리고 저는이 H-1의 색과 경계를 바꿀 것입니다.
그래서 나는 그것을 선택해야하고 새로운 선택기에서 쿼리 선택기 H-1을 사용하는 방법은 여러 가지가 있습니다.
그리고 저는 여러분에게 거대한 객체 톤과 수많은 속성 인 H-1 스타일을 보여 드리겠습니다.
그래서 H-1 스타일의 짙은 색과 같이 그 중 하나를 변경하여 노란색으로 만들려고합니다.
그리고 당신은 그것이 즉시 노란색으로 바뀌는 것을 볼 수 있습니다.
테두리가 같은 스타일 인 테두리 H-1의 경우와 동일한 것은 5 개의 픽셀을 단색으로 처리해 보겠습니다.
그리고 거기에 우리가 간다.
물론 핑크색 테두리가 노란색으로 표시되기를 원하면 물론입니다.
페이지가로드 될 때부터 자바 스크립트를 사용하는 이유가 없습니다.
CSSA 파일에 넣으면 자바 스크립트를 사용하여 노란색으로 바뀌고 사용자가 5 초 동안 페이지에있을 때 분홍색 테두리가 생기거나 사용자가 특정 부분으로 스크롤했을 때 발생하기를 원하는 경우 자바 스크립트를 사용합니다. 페이지 또는 사용자가 뭔가를 클릭합니다.
모든 것을 대화 형으로 만드는 것에 관한 것입니다. 곧이를 수행하는 방법을 살펴 보겠습니다.
스타일 속성을 사용하는 것에 대한 좋은 점은, 내가 여기에서하는 것처럼 개별 요소에서 여러 파일을 조작하는 경우이 태그에서 다섯 가지 속성을 변경하는 것이 확실히 좋은 방법이라는 것입니다.
그리고 더 좋은 방법이 있다는 몇 가지 이유가 있습니다.
첫 번째는 매우 건성 코드가 아니라는 것입니다.
태그가 지정된 스타일의 태그가 반복적으로 많이 나옵니다.
더 중요한 것은 우려의 분리라는이 개념이 있지만.
따라서 관심사의 분리는 우리의 H M L R C S가 자바 스크립트가 아니라는 개념입니다.
각자 자신의 작은 영역에 대한 책임이 있으며 우리는 그것을 원하지 않습니다.
우리는 그들 사이에 많은 크로스 오버를 원하지 않습니다.
그래서이 다이어그램에서 구조와 자바 스크립트 사이에 약간의 크로스 오버가 있다는 것을 알 수 있습니다. 자바 스크립트는 그 행동이며 평가는 프리젠 테이션입니다.
Html 자바 스크립트와 약간의 겹침이 있지만 C Ss가 오기 전에 실제로는 스타일 속성을 사용하는 모든 요소에 개별적으로 스타일을 작성해야한다는 것을 기억하십시오.
이 경우 우리의 프리젠 테이션 스타일은 실제로 구조로 짜여졌 고 C S와 함께 이제는 그들을 구분했습니다.
따라서 우리의 HMO는 순수한 구조이며, 우리의 성공은 순수한 스타일입니다.
그래서 JavaScript가 맞는 것은 페이지의 동작을 제어해야한다는 것입니다. 때로는 상황이 어떻게 보이는지를 변경하는 것이 아니라 자바 스크립트에서 실제로 스타일을 변경하는 것보다는 자바 스크립트의 속성을 변경하는 것입니다.
우리가 할 수있는 일은 CSSA 파일 내부에서 그들을 켜고 끄는 것입니다.
그래서 실제로 사용되는 패턴 중 하나는 하이라이트와 같은 CSSA 클래스를 정의하고 하이라이트 클래스가 5,6 개 또는 다양한 속성을 가지게된다는 것입니다.
그리고 나서 자바 스크립트로 요소를 선택하고 강조 클래스를 제공 할 수 있습니다.
따라서 자바 스크립트에서 한 줄을 사용하여 다섯 가지 속성을 변경하는 클래스를 추가 할 수 있습니다.
Javascript에서 이것이 어떻게 구현되는지 살펴 보겠습니다.
따라서 태그를 선택하고 스타일을 변경하는 대신 색상을 파란색으로 설정 한 다음 테두리를 스타일링하여 10 픽셀로 채우십시오. 대신 할 수있는 것은 해당 클래스의 클래스를 찾을 수 있다는 것입니다.
일반적으로 클래스가하는 일을 반영하여 다소 의미가 있기를 원합니다.
그것은 강조되고있는 것이거나 정답입니다.
시도하는 수업을 적용하는 이유가 무엇이든간에 높은 점수를 얻으려면 좋은 이름이 필요합니다.
그래서 이것은 좋은 이름은 아니지만 일부 클래스는 파란색으로 테두리를 변경하고 일부 10 픽셀은 빨간색으로 채색을 변경합니다.
그럼 내가 할 일은 내 태그를 선택한 다음 점 클래스 목록에 점을 추가하는 것입니다. 일부 클래스를 추가하면 내 태그에 강조 표시 아이디어가 주어집니다.이 모든 스타일에서 일부 클래스라는 새 클래스가 적용됩니다.
우리가 수업 목록으로 할 수있는 몇 가지 다른 것들이 있습니다.
그래서이 예제에서는 클래스 이름을 취하는 class remove를 추가하는 방법과 클래스 목록에서 해당 클래스 이름을 제거한 다음 매우 유용한 클래스 목록 토글을 제거하는 세 가지 방법을 보여줍니다.
클래스 이름이 필요합니다.
그리고 주어진 원소가 이미 그 클래스를 가지고 있다면, 그 원소가 그 클래스를 가지고 있지 않다면 그것을 제거 할 것이고, 그 원소를 켜기로합니다.
매우 유용합니다.
우리는 나중에 그것을 항상 사용할 것입니다.
제가 여기서 예증으로 돌아 가기 전에 여러분에게 보여 드리겠습니다.
나는 실제로 새로운 클래스를 정의하려고합니다.
따라서 새로운 스타일 시트를 만들고 링크를 사용하는 것보다는 시간 만 위해 스타일 태그를 사용하려고합니다.
그래서 저는 이것을 방금 큰 클래스라고 정의 할 것입니다.
그리고 글꼴 크기를 100 픽셀로 변경하고 색상을 주황색으로 변경합니다.
그리고 마지막으로 5 픽셀의 단색을 채우십시오.
그래서 나는 그것에 맡길 것이다.
내 페이지를 새로 고침해도 과정이 바뀌지 않지만 내가 원할 때 그 수업을 무언가에 적용하는 것입니다.
그래서 지금까지이 단락을 선택해야하는 큰 수업을이 단락에 만들 것입니다.
단락은 쿼리 선택기 단락과 동일한 문서입니다.
승인.
클래스 목록을 살펴 보겠습니다. 그러면 빈 목록임을 알 수 있습니다.
이 단락에는 아직 할당 된 수업이 없습니다.
따라서 P-Dub 클래스 목록에 점 추가를 추가하고 클래스를 크게 추가하려고 할 때 필요한 모든 것을 할당하려고합니다.
그리고 거기에 우리가 간다.
따라서 내 스타일 시트의 새로운 변경 사항을 자동으로 반영합니다.
내가해야 할 일은 큰 수업을 추가하는 것뿐입니다.
이렇게하면이 작업이 훨씬 쉬워지고 책임을 분리한다는 것을 알 수 있기를 바랍니다.
그래서 javascript는 실제로 개별 속성을 직접 수동으로 조작하지 않고 SS의 특정 부분을 켜거나 끕니다.
이제 Javascript 대신 가능한 한 사물을 조금만 바꾸고 있습니다.
그래서 내가 그것을 제거하기를 원한다면 클래스가없는 클래스는 클래스를 제거하지 말고 커다란 것을 제거하지 말고 내가 가장 좋아하는 것은 토글이다.
그래서 토글을 치고 Enter를 누르면 등급이 지정되지 않으므로 클래스를 크게 지정합니다.
이제 big이 이미 할당되어 있으므로 제거됩니다.
따라서이 경우 엄청난 글꼴 클래스에서이 미친 오렌지를 만드는 것은 분명히 유용하지 않지만 사용자가 클릭 할 수있게하려면 목록을 작성하는 것과 같은 작업을 수행하는 것이 좋습니다.
그리고 그것을 통해 그것을 교차합니다.
그러나 그들은 다시 클릭 할 수 있습니다. 그러면 교차되지 않거나 정상으로 돌아갑니다.
그렇게 될 것입니다.
또는 클래스를 토글하여 클래스를 수행 할 수 있으므로 완료된 클래스를 다시 클릭 할 수 있습니다.
제거되었습니다.
그것은 토글을 사용할 수있는 경우의 한 예입니다.
하지만 정말 유용합니다.
마지막으로 수업 목록을 가져올 때는 기술적으로 배열이 아니라는 것입니다.
즉, 클래스를 추가하려면 광고를 사용해야합니다.
우리는 푸시와 같은 것을 할 수 없습니다.
그래서 사소한 일이지만 기술적으로 배열이 아니라는 것을 아는 것이 중요합니다.
그래서 우리는 자바 스크립트를 통해 스타일을 조작하는 두 가지 다른 방법을 다루었습니다.
첫 번째 것은 한 번에 하나의 속성을 수동으로 처리하는 것입니다. 하나 또는 두 가지 일을하는 경우 정직하게 작동합니다.