Hướng dẫn html remove style attributes - html loại bỏ các thuộc tính kiểu

Question

Bạn không thể hủy kích hoạt trực tiếp quy tắc CSS bằng JavaScript. Vì vậy, bạn có hai tùy chọn:

1) Tùy chọn đầu tiên chỉ sử dụng JavaScript để thực hiện nó. Bạn có thể sửa đổi thuộc tính kiểu của phần tử bằng phương thức

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

0 để đặt
document.querySelectorAll("img").forEach(img => { img.addEventListener("mouseover", function() { img.classList.add("my-style"); }) img.addEventListener("mouseleave", function() { img.classList.remove("my-style"); }) });
1. Như thế này: The first option uses only javascript for doing it. You can modify the style attribute of the element using the

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

0 method in order to set

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

1. Like this:

const el = document.querySelector("#myElementId");

el.setAttribute("style", "transform: none; box-shadow: none;");

Tuy nhiên, tôi không muốn sử dụng thuộc tính kiểu trong khi sử dụng các quy tắc CSS vì tôi thích xem tất cả các kiểu trong cùng một tệp CSS và nó khó khăn hơn với mã mantain, vì vậy tôi không khuyên bạn nên sử dụng giải pháp này.

2) Giải pháp thực hành tốt bao gồm cả CSS và JS. Bạn phải tham khảo Làm cho quy tắc CSS của bạn đến một lớp

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

2. Vì vậy, sau đó bạn viết quy tắc CSS của mình như thế này: The good practice solution involves both CSS and JS. You have to reference make your css rule to a class

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

2. So then you write your css rule like this:

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

Vì vậy, bây giờ bạn sẽ cần sử dụng JavaScript để thêm hoặc xóa lớp

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

2 bất cứ khi nào bạn cần. Trong trường hợp tham chiếu

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

4 bạn sử dụng trong CSS ban đầu của mình, bạn có thể tự làm chức năng JS của mình để thêm lớp khi

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

5 đang di chuột và loại bỏ lớp khi con trỏ rời khỏi

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

5. Người nghe sự kiện này sẽ hữu ích:

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

Hãy thử nó ở đây

I have a div class

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

7 and the css for that class is this.

.filter-name-of-hotel:after {
    content: '\f002';
    font-family: 'FontAwesome';
    position: absolute;
    bottom: 0px;
    right: 10px;
    color: black;
    font-size: 23px;
}

in the the div class there's a textbox element. When I click on that textbox I want to remove 'content' property from the class. Is this possible?

asked Jul 2, 2015 at 9:44Jul 2, 2015 at 9:44

Use 2 classes:

.filter-name-of-hotel.withContent:after {
    content: '\f002'; 
}
.filter-name-of-hotel:after {
    font-family: 'FontAwesome'; 
    position: absolute; 
    bottom: 0px; 
    right: 10px; 
    color: black;
    font-size: 23px; 
}

now just remove the class

document.querySelectorAll("img").forEach(img => {
    img.addEventListener("mouseover", function() {
        img.classList.add("my-style");
    })

    img.addEventListener("mouseleave", function() {
        img.classList.remove("my-style");
    })
});

8 when clicking inside the textbox

$('#div').removeClass('withContent');

answered Jul 2, 2015 at 9:47Jul 2, 2015 at 9:47

benbenben

3,5271 gold badge14 silver badges28 bronze badges1 gold badge14 silver badges28 bronze badges

1

I don't know to remove content in class. But i think, you can define other class the same current class but without content. After, use JS check when click text will replace class name.

answered Jul 2, 2015 at 9:50Jul 2, 2015 at 9:50

You can do this using just css. Make a css rule for your text area.

textarea{
   background-color:blue;
}

and then make a css rule for when the textarea is focused

textarea:focus{
   background-color: red;
}

This will set the textarea to red when selected and blue when no selected.

This is also possible using ng-class, you should check it out:

https://docs.angularjs.org/api/ng/directive/ngClass

Also here is a code pen showing how to do it an Angular way:

Updated my code pen. This shows how to solve your problem:

http://codepen.io/anon/pen/dodZZx

answered Jul 2, 2015 at 10:11Jul 2, 2015 at 10:11

1

Đã đăng vào thg 8 20, 2020 8:41 SA 4 phút đọc 4 phút đọc

Built-in directives listen to and modify the behavior and layout HTML listen to and modify the behavior and layout HTML

Built-in attribute directives

Attribute directives lắng nghe sửa đổi hành vi của các element, attributes, property và thành phần khác của HTML. Bạn thường áp dụng chúng cho các element như thể chúng là attribute HTML. lắng nghe sửa đổi hành vi của các element, attributes, property và thành phần khác của HTML. Bạn thường áp dụng chúng cho các element như thể chúng là attribute HTML.

Có rất nhiều NgModule như RouteModule và FormModule xác định các directvie của riêng chúng. Các directives phổ biến nhất như sau:

NgClass-Thêm và xóa tập hợp các class CSS.-Thêm và xóa tập hợp các class CSS.
NgStyles-Thêm và xóa tập hợp các HTML styles.-Thêm và xóa tập hợp các HTML styles.
NgModel-Thêm two-way binding vào element của HTML.-Thêm two-way binding vào element của HTML.

I. NgClassNgClass

Bạn có thể thêm hoặc xóa tên class CSS khỏi thuộc tính lớp của một phần tử có binding class.

Để binding một class, băt đầu là tiền tố class theo sau là dấu chấm (.) (ex: [class.foo]="hasFoo"). Angular sẽ thêm class khi biểu thức liên kết là true ngược xóa class khi biểu thức liên kết là false .class theo sau là dấu chấm (.) (ex: [class.foo]="hasFoo"). Angular sẽ thêm class khi biểu thức liên kết là true ngược xóa class khi biểu thức liên kết là false .
Để binding buộc nhiều class thì sử dung cú pháp dạng [class]="classExpr". Biểu thức có thể một chuội tên lớp được phân tách bằng dấu cách hoặc nó có thể định dạng object với tên lớp là key và value là giá trị booleanclass thì sử dung cú pháp dạng [class]="classExpr". Biểu thức có thể một chuội tên lớp được phân tách bằng dấu cách hoặc nó có thể định dạng object với tên lớp là key và value là giá trị boolean

example:

...

...

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

0

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

1

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

2

Như các bạn có thể thấy ngClass hộ trợ chúng ta với classExpression có thể:ngClass hộ trợ chúng ta với classExpression có thể:

String - các lớp css được liệt kê trong chuỗi được ngăn cách bới dấu cách - các lớp css được liệt kê trong chuỗi được ngăn cách bới dấu cách
Array - các lớp css được liệt kê là các phần tử của mảng - các lớp css được liệt kê là các phần tử của mảng
Object - key sẽ là tên lớp, value là giá trị boolean hoặc biểu thức return kết qủa dạng true/false - key sẽ là tên lớp, value là giá trị boolean hoặc biểu thức return kết qủa dạng true/false

Chỉ thị NgClass có thể sử dụng thay thế cho binding class trưc tiếp ([class] ). Tuy nhiên, việc sử dụng cú pháp binding class ở trên mà không có NgClass được ưu tiên hơn vì do những cải tiến về binding class trong Angular. NgClass không còn được cung cấp gía trị đáng kể nữa và cuối cùng có thể sẽ bị xóa trong tương lại.NgClass có thể sử dụng thay thế cho binding class trưc tiếp ([class] ). Tuy nhiên, việc sử dụng cú pháp binding class ở trên mà không có NgClass được ưu tiên hơn vì do những cải tiến về binding class trong Angular. NgClass không còn được cung cấp gía trị đáng kể nữa và cuối cùng có thể sẽ bị xóa trong tương lại.

--> chúng ta có thể sử dung [class] thay cho [ngClass].

II. NgStyleNgStyle

Để binding style, bắt đầu với tiền tố style theo sau là dấu chấm (.) và đế tến thuộc tính của style (example: [style.width="10px"]). Thuộc tính sẽ được set giá trị với biểu thưc được liên kết thương là một chuỗi.style, bắt đầu với tiền tố style theo sau là dấu chấm (.) và đế tến thuộc tính của style (example: [style.width="10px"]). Thuộc tính sẽ được set giá trị với biểu thưc được liên kết thương là một chuỗi.

Chú ý là style property: tên thuộc tính có thể viết dash-case hoặc camelCase. Ví dụ font-sizehoặc fontSize đều được.dash-case hoặc camelCase. Ví dụ font-sizehoặc fontSize đều được.

Nếu có nhiều hơn một style mà bạn muốn thì bạn có thể viết như sau [style]="styleExpr". Biểu thức đính kém với [style] liên kết thương là danh sách kiểu như "width: 100px; height: 100px;".
Một chỉ thị thuộc tính được update style cho phần tử HTML . Set một hoặc nhiều thuộc tính style, được chỉ định dưới dạng các cặp key-value được phân tách bằng dấu hai chấm. Ở đây thì key là tên style cùng với đó hậu tố (như 'top.px' , 'font-size.em').
Cú pháp kèm theo unit [style.font-size.px] = "size"(ex: [style.width.px]="10")

styleExpr format có thể :

Type	Value
String	"width: 100%; height: 100%"
Array	['width', '100%']
Object	{[key: string]: string

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

3

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

4

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

5

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

6

III. Styling Precedence Trong thực tế thì việc một phần tử HTML có một hoặc nhiều hơn một class hoặc style ở đây list class hay list styles được binding. Khi có nhiều binding trên cùng class name hoặc style property, angular sẻ dụng một tập hợp quy tắc ưu tiên để giải quyết xung đột này để biết class nào hay style nào được sử dụng cho phần tử HTML.Styling Precedence Trong thực tế thì việc một phần tử HTML có một hoặc nhiều hơn một class hoặc style ở đây list class hay list styles được binding. Khi có nhiều binding trên cùng class name hoặc style property, angular sẻ dụng một tập hợp quy tắc ưu tiên để giải quyết xung đột này để biết class nào hay style nào được sử dụng cho phần tử HTML.

Styling precedence (highest to lowest):

1.Template bindings:

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

7

2.Directive host bindings:

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

8

3.Component host bindings:

.my-style {
    transform:scale(3);
    box-shadow:0 4px 6px 0 #222;
}

9

Các bạn có thể tham khảo demo tại đây :

https://stackblitz.com/edit/angular-ivy-eau8f4?file=src%2Fapp%2Fapp.component.ts

Link tham khảo :

https://angular.io/guide/attribute-binding

https://angular.io/api/core/HostBinding

programming html removeProperty not working

Hướng dẫn html remove style attributes - html loại bỏ các thuộc tính kiểu

Hãy thử nó ở đây

Built-in attribute directives

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội