Html | Właściwość DOM Element

Często musimy zmodyfikować rzeczy na stronie internetowej, aby zobaczyć, jak to wygląda. W takim przypadku może być wymagane edytowalne elementy. Aby to zrobić, html dom „zadowolony„Element można wykorzystać. Ten element jest używany jako atrybut w elemencie HTML. Ponadto element powiązany z tym atrybutem może być edytowany lub modyfikowany na stronie internetowej.

Ten zapis zapewni przewodnik na właściwości HTML DOM ContentEditable.

Jak uczynić element edytowalny w HTML?

HTML "zadowolony„Własność jest wykorzystywana do określenia, czy treść elementu jest edytowalna. Ta właściwość zwraca wartość logiczną, w której „PRAWDA„Wartość oznacza, że ​​element jest edytowalny, a„FAŁSZ”Wskazuje, że treść nie jest edytowalna. Tę właściwość można wykorzystać z dowolnym elementem.

Przykład: Jak dodać atrybut „ContentEditable” w elementach HTML?
Po pierwsze w HTML określ element nagłówka

dołączyć do dokumentu. Następnie dodaj HTML

element powiązany z atrybutami:

• ID: Ten atrybut jest wykorzystywany do jednoznacznej identyfikacji elementu, dostępny w CSS i JavaScript.
• zadowolony: Atrybut, który oznacza, czy element HTML jest edytowalny, czy nie. To atrybut boolean.

W końcu dodaj jeszcze jeden

element z identyfikatorem „wynik”, Który zostanie wyświetlony po manipulacji JavaScript:

Własność HTML ContentEditable

Czy mogę edytować ten akapit?

Zastosujmy JavaScript, aby wyświetlić wartość atrybutu ContentEditable za pomocą „zadowolony" nieruchomość.

JavaScript

Oto wyjaśnienie wyżej wymienionego kodu:

• W elemencie HTML utwórz zmienną ”odpowiedź”Korzystanie z słowa kluczowego„var".
• Następnie pobieraj element o identyfikatorze „pkt”I spraw, aby było edytowalne z„zadowolony" nieruchomość.
• W celu osadzenia wartości logicznej właściwości zadowolonej w

  element z identyfikatorem „wynik”, określ „dokument.getElementById ()”Funkcja z identyfikatorem

  tag jako parametr.

• „„InnerHtml”Właściwość zwraca lub określa zawartość HTML elementu, w którym wynik musi być osadzony.
• Wartość „odpowiedź„Zmienna jest przypisana do elementu o identyfikatorze”wynik".

Można zauważyć, że element akapitu jest teraz edytowalny:

Zastosujmy kilka właściwości CSS do HTML, jak wspomniano powyżej.

Styl „treść” div

.treść
szerokość: 500px;
Wysokość: 170px;
kolor tła: #f89e9e;
Margines: 0 Auto;
Wyściółka: 12px;

Element div o nazwie klasy „treść”Jest stosowany z następującymi właściwościami CSS:

• "szerokość„Właściwość określa szerokość elementu.
• "wysokość”Dostosowuje wysokość elementu.
• "kolor tła”Stosuje kolor do tła elementu.
• "margines”Z wartością ustawioną jako„0 Auto”Nie identyfikuje przestrzeni na najwyższym dnie i równoważnej przestrzeni po lewej i prawej stronie elementu.
• "wyściółka„Właściwość dodaje przestrzeń po wszystkich stronach zawartości elementu lub wewnątrz granicy.

Element stylu „H2”

H2
kolor tła: #f06f6f;
Wyściółka: 5px;

„„kolor tła" I "wyściółka”Właściwości działają jak opisano powyżej.

Styl ”P" Element

.Treść P
Rozmiar czcionki: 24px;
kolor tła: #EB7C7C;
Wyściółka: 2px;
Kursor: wskaźnik;

Poniżej znajdują się właściwości zastosowane do „P„Element„ „treść„Div:

• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki elementu.
• "kursor„Własność o wartości”wskaźnik”Ustawia kursor jako rękę z palcem wskazującym.

Oto ostateczne spojrzenie na wyżej wymyśloną stronę:

Przykład: atrybut „ContentEditable” o wartości „fałszywych”
Poniżej podany kod reprezentuje, że wartość „zadowolony”Atrybut jest ustawiony jako„FAŁSZ”:

Czy mogę edytować ten akapit?

Na podstawie danego wyjścia można zweryfikować, że element nie jest edytowalny:

W ten sposób działa nieruchomość zadowolona.

Wniosek

W HTML „The”zadowolony„Atrybut jest wykorzystywany do uczynienia z elementami edytowanymi. Jest to atrybut boolean o wartości prawdziwej lub fałszywej. „„zadowolony„Właściwość w JavaScript można wykorzystać do dostępu do wartości tego atrybutu. Ten blog prowadził o właściwości HTML DOM ContentEditable z przykładami.