toggle icon
سلام ، من یه تگ i دارم و میخوام وقتی روی اون کلیک شد به صورت toggle کلاس اون i عوض شه
کد رو نوشتم ولی فکر میکنم قسمتی از اون اشتباه باشه ممنون میشم کمک کنید
<a id="fullscreen" href="#" class="nav-link">
<i class="fad fa-expand"></i>
</a>let elements = document.documentElement;
let fullscreen = document.getElementById('fullscreen');
let fullIcon = fullscreen.querySelector('i');
fullscreen.addEventListener('click', (e) => {
e.preventDefault();
let full = false
if (elements.requestFullscreen) {
elements.requestFullscreen();
full = true;
fullIcon.classList.add('fa-expand');
fullIcon.classList.remove('fa-compress');
}
if(document.exitFullscreen){
document.exitFullscreen();
full = false;
fullIcon.classList.remove('fa-expand');
fullIcon.classList.add('fa-compress');
}
})گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
فخرالدین لنگی
تخصص :
برنامه نویس وب، آندروید و سیست...
@fakhraddin
4 سال پیش
آپدیت شد
برنامه نویس وب، آندروید و سیستم های کامپیوتری
گزارش تخلف
کپی کردن
0
با سلام دوست گرامی
من پیشنهاد می دم به جای اینکه کلاس تگ i رو تغییری می ده کل html رو تغییر بده مثلا
fullscreen.innerHTML = '<i class="fad compress"></i>';هم کدت کمتر می شه هم مطمئن تره
گزارش تخلف
کپی کردن
0
اگر منظورتون رو درست متوجه شده باشم، می خواید درون یک پیوند، تغییر شکل رو با کلیک کردن بوجود بیارید.
کدش رو نوشتم:
<!doctype html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>تغییر شکل</title>
<style>
</style>
</head>
<body>
<div>
<a id="js-btn" href="#" class="nav-link">
کلیک کنید <i class="fa fa-expand"></i>
</a>
</div>
<script>
let btn = document.querySelector('#js-btn');
btn.addEventListener('click', (e) => {
e.preventDefault();
btn.querySelector('i').classList.toggle('fa-expand');
btn.querySelector('i').classList.toggle('fa-compress');
})
</script>
</body>
</html>