मैं सोच रहा था कि कैसे हम एक HTML तत्व बना सकते हैं जैसे <div>
या <p>
टैग तत्व पुन: प्रयोज्य जब शुद्ध जावास्क्रिप्ट का उपयोग करके क्लिक किया गया, jQuery लाइब्रेरी या कोई अन्य लाइब्रेरी नहीं।शुद्ध जावास्क्रिप्ट का उपयोग कर HTML तत्व का आकार बदलने योग्य कैसे करें?
उत्तर
मैं वास्तव में पुस्तकालय में किसी प्रकार का उपयोग करने की अनुशंसा, लेकिन आप इसे करने के लिए कहा, तो आप इसे पाने:
var p = document.querySelector('p'); // element to make resizable
p.addEventListener('click', function init() {
p.removeEventListener('click', init, false);
p.className = p.className + ' resizable';
var resizer = document.createElement('div');
resizer.className = 'resizer';
p.appendChild(resizer);
resizer.addEventListener('mousedown', initDrag, false);
}, false);
var startX, startY, startWidth, startHeight;
function initDrag(e) {
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
}
function doDrag(e) {
p.style.width = (startWidth + e.clientX - startX) + 'px';
p.style.height = (startHeight + e.clientY - startY) + 'px';
}
function stopDrag(e) {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
याद रखें कि यह (केवल Firefox में परीक्षण सभी ब्राउज़रों में नहीं चल सकते हैं, निश्चित रूप से आईई < 9 में काम नहीं कर रहा है)।
अद्भुत, मैं आपकी मदद की बहुत सराहना करता हूं @ Pumbaa80 – monk
एक प्रश्न, क्या '0' का यह मान कोड parseInt (document.defaultView.getComputedStyle (p) .width, 10) में करता है; – monk
यह एक तर्क है ['parseInt()'] (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt) जो सुनिश्चित करता है कि यह दशमलव संख्याओं को संसाधित करता है। – user123444555621
शुद्ध सीएसएस 3 समाधान के बारे में क्या?
div {
resize: both;
overflow: auto;
}
दुर्भाग्यवश, सीएसएस आकार बदलने आईई – pyanzin
में समर्थित नहीं है यह अच्छा है, लेकिन लचीला नहीं है। –
मुझे लगता है कि इसका उल्लेख करना महत्वपूर्ण है: सीएसएस 'आकार बदलें' वेबकिट ब्राउज़र का उपयोग करने से आप इसे छोटे, केवल बड़े (दोनों आयामों में) बनाने के लिए तत्व का आकार बदलने नहीं देंगे। – Rotareti
अपने क्रॉस ब्राउज़र संगत resizer देखें।
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>resizer</title>
<meta name="author" content="Andrej Hristoliubov [email protected]">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/resizer.js"></script>
<style>
.element {
border: 1px solid #999999;
border-radius: 4px;
margin: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
function onresize() {
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var element3 = document.getElementById("element3");
var ResizerY = document.getElementById("resizerY");
ResizerY.style.top = element3.offsetTop - 15 + "px";
var topElements = document.getElementById("topElements");
topElements.style.height = ResizerY.offsetTop - 20 + "px";
var height = topElements.clientHeight - 32;
if (height < 0)
height = 0;
height += 'px';
element1.style.height = height;
element2.style.height = height;
}
function resizeX(x) {
//consoleLog("mousemove(X = " + e.pageX + ")");
var element2 = document.getElementById("element2");
element2.style.width =
element2.parentElement.clientWidth
+ document.getElementById('rezizeArea').offsetLeft
- x
+ 'px';
}
function resizeY(y) {
//consoleLog("mousemove(Y = " + e.pageY + ")");
var element3 = document.getElementById("element3");
var height =
element3.parentElement.clientHeight
+ document.getElementById('rezizeArea').offsetTop
- y
;
//consoleLog("mousemove(Y = " + e.pageY + ") height = " + height + " element3.parentElement.clientHeight = " + element3.parentElement.clientHeight);
if ((height + 100) > element3.parentElement.clientHeight)
return;//Limit of the height of the elemtnt 3
element3.style.height = height + 'px';
onresize();
}
var emailSubject = "Resizer example error";
</script>
</head>
<body>
<div id='Message'></div>
<h1>Resizer</h1>
<p>Please see example of resizing of the HTML element by mouse dragging.</p>
<ul>
<li>Drag the red rectangle if you want to change the width of the Element 1 and Element 2</li>
<li>Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3</li>
<li>Drag the small blue square at the left bottom of the Element 2, if you want to resize of the Element 1 Element 2 and Element 3</li>
</ul>
<div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
<div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
<div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
Element 2
<div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
<script type="text/javascript">
resizerXY("resizerXY", function (e) {
resizeX(e.pageX + 10);
resizeY(e.pageY + 50);
});
</script>
</div>
<div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
<script type="text/javascript">
resizerX("resizerX", function (e) {
resizeX(e.pageX + 25);
});
</script>
<div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
</div>
<div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
<script type="text/javascript">
resizerY("resizerY", function (e) {
resizeY(e.pageY + 25);
});
</script>
<div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
</div>
<script type="text/javascript">
onresize();
</script>
</body>
</html>
इसके अलावा resizer
की मेरी उदाहरण देख है सरल:
उदाहरण: https://jsfiddle.net/RainStudios/mw786v1w/
var element = document.getElementById('element');
//create box in bottom-left
var resizer = document.createElement('div');
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
//Append Child to Element
element.appendChild(resizer);
//box function onmousemove
resizer.addEventListener('mousedown', initResize, false);
//Window funtion mousemove & mouseup
function initResize(e) {
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}
//resize the element
function Resize(e) {
element.style.width = (e.clientX - element.offsetLeft) + 'px';
element.style.height = (e.clientY - element.offsetTop) + 'px';
}
//on mouseup remove windows functions mousemove & mouseup
function stopResize(e) {
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
}
महान समाधान! फ़ायरफ़ॉक्स 56, क्रोम 61, ओपेरा 48 और आईई 11 के लिए परीक्षण और काम करता है। – JCO9
मैं सिर्फ एक CodePen बनाई गई है कि पता चलता है कि यह कैसे कर सकते हैंES6 का उपयोग करके आसानी से किया जाना चाहिए।
http://codepen.io/travist/pen/GWRBQV
असल में, यहाँ वर्ग है कि इस करता है।
let getPropertyValue = function(style, prop) {
let value = style.getPropertyValue(prop);
value = value ? value.replace(/[^0-9.]/g, '') : '0';
return parseFloat(value);
}
let getElementRect = function(element) {
let style = window.getComputedStyle(element, null);
return {
x: getPropertyValue(style, 'left'),
y: getPropertyValue(style, 'top'),
width: getPropertyValue(style, 'width'),
height: getPropertyValue(style, 'height')
}
}
class Resizer {
constructor(wrapper, element, options) {
this.wrapper = wrapper;
this.element = element;
this.options = options;
this.offsetX = 0;
this.offsetY = 0;
this.handle = document.createElement('div');
this.handle.setAttribute('class', 'drag-resize-handlers');
this.handle.setAttribute('data-direction', 'br');
this.wrapper.appendChild(this.handle);
this.wrapper.style.top = this.element.style.top;
this.wrapper.style.left = this.element.style.left;
this.wrapper.style.width = this.element.style.width;
this.wrapper.style.height = this.element.style.height;
this.element.style.position = 'relative';
this.element.style.top = 0;
this.element.style.left = 0;
this.onResize = this.resizeHandler.bind(this);
this.onStop = this.stopResize.bind(this);
this.handle.addEventListener('mousedown', this.initResize.bind(this));
}
initResize(event) {
this.stopResize(event, true);
this.handle.addEventListener('mousemove', this.onResize);
this.handle.addEventListener('mouseup', this.onStop);
}
resizeHandler(event) {
this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft);
this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop);
let wrapperRect = getElementRect(this.wrapper);
let elementRect = getElementRect(this.element);
this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px';
this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px';
this.element.style.width = (elementRect.width + this.offsetX) + 'px';
this.element.style.height = (elementRect.height + this.offsetY) + 'px';
}
stopResize(event, nocb) {
this.handle.removeEventListener('mousemove', this.onResize);
this.handle.removeEventListener('mouseup', this.onStop);
}
}
class Dragger {
constructor(wrapper, element, options) {
this.wrapper = wrapper;
this.options = options;
this.element = element;
this.element.draggable = true;
this.element.setAttribute('draggable', true);
this.element.addEventListener('dragstart', this.dragStart.bind(this));
}
dragStart(event) {
let wrapperRect = getElementRect(this.wrapper);
var x = wrapperRect.x - parseFloat(event.clientX);
var y = wrapperRect.y - parseFloat(event.clientY);
event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y);
}
dragStop(event, prevX, prevY) {
var posX = parseFloat(event.clientX) + prevX;
var posY = parseFloat(event.clientY) + prevY;
this.wrapper.style.left = posX + 'px';
this.wrapper.style.top = posY + 'px';
}
}
class DragResize {
constructor(element, options) {
options = options || {};
this.wrapper = document.createElement('div');
this.wrapper.setAttribute('class', 'tooltip drag-resize');
if (element.parentNode) {
element.parentNode.insertBefore(this.wrapper, element);
}
this.wrapper.appendChild(element);
element.resizer = new Resizer(this.wrapper, element, options);
element.dragger = new Dragger(this.wrapper, element, options);
}
}
document.body.addEventListener('dragover', function (event) {
event.preventDefault();
return false;
});
document.body.addEventListener('drop', function (event) {
event.preventDefault();
var dropData = event.dataTransfer.getData("text/plain").split(',');
var element = document.getElementById(dropData[0]);
element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2]));
return false;
});
- 1. स्पर्शों का उपयोग करके एक HTML तत्व का आकार बदलें
- 2. jQuery का उपयोग कर स्क्रॉलबार के साथ एचटीएमएल में एक आकार बदलने योग्य तालिका कैसे बनाएं?
- 3. jQuery आकार बदलने वाले तत्व
- 4. Winforms आकार बदलने योग्य बनाने का सबसे अच्छा तरीका?
- 5. आकार बदलने योग्य फ्रेम इम्यूलेशन
- 6. जावास्क्रिप्ट का उपयोग कर कॉलर तत्व कैसे प्राप्त करें?
- 7. jQuery यूआई आकार बदलने योग्य आग खिड़की का आकार बदलें
- 8. आकार बदलने योग्य स्वत: पूर्ण
- 9. शुद्ध जावास्क्रिप्ट
- 10. आकार बदलने योग्य तालिका कॉलम
- 11. jQuery, पूरे तत्व का HTML प्राप्त करें
- 12. जावास्क्रिप्ट यूएल तत्व की ऊंचाई का आकार बदलने नहीं कभी कभी जब Jquery
- 13. आईडी के बिना HTML तत्व का उपयोग कैसे करें?
- 14. जीडब्ल्यूटी आकार बदलने योग्य पैनल
- 15. आकार बदलने योग्य पैनल कैसे बनाएं?
- 16. PHP का उपयोग कर HTML तालिका का विश्लेषण कैसे करें?
- 17. जावास्क्रिप्ट का उपयोग करके मूल्य द्वारा इनपुट तत्व का चयन कैसे करें?
- 18. शुद्ध सीएसएस के साथ उत्तरदायी डिजाइन के लिए छवि का आकार बदलने का तरीका कैसे बदलें?
- 19. बैकबोन का उपयोग करके दृश्य में विंडो में एक आकार बदलने का ईवेंट कैसे जोड़ूं?
- 20. आकार बदलने योग्य विजेट एंड्रॉइड
- 21. जावास्क्रिप्ट का उपयोग कर एक HTML चयनित विकल्प कैसे बदलूं?
- 22. क्या मैं जावास्क्रिप्ट के साथ एक गैर-आकार बदलने योग्य मौजूदा ब्राउज़र विंडो को आकार बदलने योग्य बदल सकता हूं?
- 23. आकार बदलने योग्य कैनवास (JQuery यूआई)
- 24. JSplitPane सेट आकार बदलने योग्य झूठी
- 25. सी # छवि का आकार बदलने का आकार फ़ाइल आकार
- 26. क्रोम का उपयोग कर सीएसएस तत्व का निरीक्षण कैसे करें?
- 27. एंड्रॉइड आकार बदलने योग्य आयताकार फसल
- 28. जावास्क्रिप्ट में बाहरी HTML का उपयोग कैसे करें?
- 29. मैं नोड व्यू का उपयोग करके आकार बदलने योग्य और क्रमबद्ध कॉलम कैसे प्राप्त करूं?
- 30. jquery का उपयोग कर नाम से तत्व कैसे प्राप्त करें?
मुझे यकीन है कि कोई नीचे जवाब देगा लेकिन jQuery में करना आसान है, और क्रॉस-ब्राउज़र समस्याओं के साथ भी मदद करता है। मैं jQuery का उपयोग करने का सुझाव दूंगा, जब तक कि यह एक बड़ी समस्या न हो। – Undefined
'आकार बदलने योग्य' का क्या मतलब है? यदि आप खिड़की का आकार बदलना चाहते हैं, तो आप तत्व की चौड़ाई% में सेट कर सकते हैं। –
यहां बताया गया है कि मैं एक div तत्व का आकार कैसे बदलता हूं: https://stackoverflow.com/questions/43411103/resize-div-vertical-or-horizontal/46552497#46552497 – sfanjoy