[分享]css与js实用教程

CSS与JS是两种常用于网页设计与开发中的技术。它们可以帮助我们实现各种功能，美化网页外观，提升用户交互体验。下面是一些CSS与JS的实用教程。CSS实用教程：/ 1. 文字溢出省略号 / overf...

CSS与JS是两种常用于网页设计与开发中的技术。它们可以帮助我们实现各种功能，美化网页外观，提升用户交互体验。下面是一些CSS与JS的实用教程。

CSS实用教程：

/* 1. 文字溢出省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

/* 2. 纵向居中元素 */
display: flex;
align-items: center;

/* 3. 水平与垂直居中元素 */
display: flex;
align-items: center;
justify-content: center;

/* 4. 图片等比例缩放 */
img {
    max-width: 100%;
    height: auto;
} 

JS实用教程：

/* 1. 点击事件 */
const btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
    // some code here
});

/* 2. 定时器 */
let timer = setInterval(function() {
    // some code here
}, 1000);

/* 3. 获取元素属性值 */
const box = document.querySelector('#box');
const width = box.offsetWidth;
const height = box.offsetHeight;

/* 4. 获取URL参数 */
function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
    const results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
} 

通过以上简单的实用教程，您可以更好的应用CSS和JS，定制出具有吸引力和优良交互性的网页。