풍부한 텍스트를 전방에서 어떻게 처리합니까
2675 단어 프런트엔드 소규모 지식JSvue
되돌아오는 결과는 하나의 그룹입니다: [0: img, 1: h1 length: 2] 주의: 가져온 그룹은 위조 그룹일 수 있습니다. 인쇄 길이는 0입니다: Collection에length 속성이 있지만 js가 호출할 때length가 0인 문제입니다. 여기에서 얻은 것은 위조 그룹입니다. 이전에 인쇄한 이 그룹을 과장한 것입니다. 보이는 것은 과장된 데이터입니다.통속적으로 말하면 이dom구조가 불러오기도 전에 js가 실행되었다. 해결 방법은dom구조가 불러오기가 끝난 후에 이 그룹을 얻는 것이다.
vue에서this.$사용nextTick (() = > {}) 에서 가져오면 됩니다.
2: 이 그룹을 옮겨다니기
모든 요소를 가져옵니다. 태그 요소의 localName 속성에 따라 태그의 카테고리를 판단합니다. img p h1 div
3: 너비를 예로 들면 먼저 원소의width와height를 얻은 다음에if조건을 통해 판단하고 그 목표 원소에 필요한 스타일을 정의한다.
주의: 그림의 축소 문제에 부딪히면 필요에 따라img의 너비와 실제 필요한 너비에 따라 축소비를 계산하고 높이의 동기화 축소비를 변경할 수 있습니다
주제 사고방식: 목표 요소를 얻고 조건에 따라 스타일 속성을 판단하며 필요에 따라 목표 요소의 스타일을 설정한다.
getrichWord(){
this.$axios
.get(this.$http + "api/personal/aboutus")
.then(res => {
//console.log(res);
if (res.data.code == 0) {
this.richHtml=res.data.Entity.content;
this.exampleSolve(this.$refs.richHtml);
}
})
.catch(err => {});
},
// ,
exampleSolve(domele) {
let refEle = domele;
//console.log(domele);
this.$nextTick(() => {
let imgArr = refEle.getElementsByTagName("img");
//console.log(imgArr);
this.handleStyle(imgArr);
let videoArr = refEle.getElementsByTagName("video");
this.handleStyle(videoArr);
//console.log(videoArr);
});
},
// img video
handleStyle(ele) {
let elem = ele;
let maxWidth = $(".componayIntro").width();
let ratio = 0;
for (let i = 0; i < elem.length; i++) {
//console.log($(elem[i]).width(), maxWidth);
if ($(elem[i]).width() > maxWidth) {
//console.log(elem[i]);
ratio = $(elem[i]).width() / maxWidth;
var height = $(elem[i]).height() / ratio;
//console.log($(elem[i]).height(), ratio);
$(elem[i]).css({
width: maxWidth + "px",
height: height + "px",
margin: "0 auto",
display: "block"
});
//console.log($(elem[i]).width());
} else if ($(elem[i]).width() < maxWidth) {
ratio = $(elem[i]).width() / maxWidth;
var height = $(elem[i]).height() / ratio;
$(elem[i]).css({
width: maxWidth + "px",
height: height + "px",
margin: "0 auto",
display: "block"
});
}
}
},
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
풍부한 텍스트를 전방에서 어떻게 처리합니까1: 우선 vue의ref 태그 (예:this.$refs.descriptionInfo.$el.children) 에 따라 풍부한 텍스트 요소의 모든 탭을 가져옵니다 되돌아오는 결과는 하나의 그룹입니다: [0: img, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.