js CSS操作方法集合_javascript技巧
//获取元素的真实的,最终的CSS样式属性值的函数
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
//两个确定元素相对于整个文档的X和Y位置的辅助位置
function pageX(elem){
return elem.offsetParent?
elem.offsetLeft+pageX(elem.offsetParent):
elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?
elem.offsetTop+pageY(elem.offsetParent):
elem.offsetTop;
}
//确定元素相对于父亲的位置的两个函数
function parentX(elem){
return elem.parentNode == elem.offsetParent?
elem.offsetLeft:
pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?
elem.offsetTop:
pageY(elem)-pageY(elem.parentNode);
}
//确定元素相对于它的CSS容器的位置
function posX(elem){
return parseInt(getStyle(elem,"left"));
}
function posY(elem){
return parseInt(getStyle(elem,"top"));
}
//设置元素x和y位置(与当前位置无关)的函数
function setX(elem,pos){
elem.style.left = pos+"px";
}
function setY(elem,pos){
elem.style.top = pos+"px";
}
//调整元素相对于当前位置的距离的函数
function addX(elem,pos){
setX(posX(elem)+pos);
}
function addY(elem,pos){
setY(posY(elem)+pos);
}
//获取元素当前的高度和宽度
function getHeight(elem){
return parseInt(getStyle(elem,'height'));
}
function getWidth(elem){
return parseInt(getStyle(elem,'width'));
}
//即是元素隐藏,也能分别获取它潜在的完整高度和宽度的两个函数
function fullHeight(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetHeight||getHeight(elem);
}
var old = resetCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var h = elem.clientHeight||getHeight(elem);
restoreCSS(elem,old);
return h;
}
function fullWidth(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetWidth || getWidth(elem);
}
var old = resetCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var w = elem.clientWidth || getWidth(elem);
restoreCSS(elem,old);
return w;
}
function resetCSS(elem,prop){
var old = [];
for(var i in prop){
old[i] = elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
//使用CSS的display属性来切换元素可见性的一组函数
function hide(elem){
var curDisplay = getStyle(elem,'display');
if(curDisplay != 'none'){
elem.$oldDisplay= curDisplay;
}
elem.style.display = 'none';
}
function show(elem){
elem.style.display = elem.$oldDisplay ||'';
}
//设置元素的透明度
function setOpacity(elem,level){
if(elem.filters){
elem.style.filters = 'alpha(opacity='+level+')';
}else{
elem.style.opacity = level/100;
}
}

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menggunakan fail font yang dipasang di laman web baru -baru ini, saya memuat turun fon percuma dari internet dan berjaya memasangnya ke dalam sistem saya. Sekarang ...

Apabila bilangan elemen tidak ditetapkan, bagaimana untuk memilih elemen anak pertama nama kelas yang ditentukan melalui CSS. Semasa memproses struktur HTML, anda sering menghadapi unsur yang berbeza ...

Halaman H5 perlu dikekalkan secara berterusan, kerana faktor -faktor seperti kelemahan kod, keserasian pelayar, pengoptimuman prestasi, kemas kini keselamatan dan peningkatan pengalaman pengguna. Kaedah penyelenggaraan yang berkesan termasuk mewujudkan sistem ujian lengkap, menggunakan alat kawalan versi, kerap memantau prestasi halaman, mengumpul maklum balas pengguna dan merumuskan pelan penyelenggaraan.

Isu keserasian limpahan berbilang baris pada terminal mudah alih yang ditinggalkan pada peranti yang berbeza apabila membangunkan aplikasi mudah alih menggunakan Vue 2.0, anda sering menghadapi keperluan untuk melimpah teks ...

Buat bar kemajuan menggunakan HTML5 atau CSS: Buat bekas bar kemajuan. Tetapkan lebar bar kemajuan. Buat elemen dalaman bar kemajuan. Menetapkan lebar elemen dalaman bar kemajuan. Gunakan perpustakaan JavaScript, CSS, atau Progress Bar untuk memaparkan kemajuan.

Perbincangan mendalam mengenai kaedah pengubahsuaian gaya div bersarang artikel ini akan menerangkan secara terperinci bagaimana untuk mengubahsuai gaya elemen div struktur bersarang secara berkesan. Cabaran yang kita hadapi adalah bagaimana ...

H5 (HTML5) sesuai untuk aplikasi ringan, seperti halaman kempen pemasaran, halaman paparan produk dan promosi korporat mikro. Kelebihannya terletak pada platformiti silang dan interaktiviti yang kaya, tetapi batasannya terletak pada interaksi dan animasi yang kompleks, akses sumber tempatan dan keupayaan luar talian.

Di HTML, tetapkan sempadan meja H5 melalui CSS: Memperkenalkan lembaran gaya CSS, gaya sempadan menggunakan atribut sempadan (termasuk sempadan lebar sempadan, gaya sempadan, dan sub-kekhasan warna sempadan), dan memohon gaya ke elemen meja. Di samping itu, gaya sempadan tertentu boleh ditetapkan, seperti sempadan atas, hak sempadan, sempadan sempadan, dan kiri sempadan.
