আমি কীভাবে জাভাস্ক্রিপ্টটি সামগ্রীতে একটি ডিভিও তৈরি করতে এবং স্টাইল করতে (এবং পৃষ্ঠায় সংযোজন) করতে পারি? আমি জানি এটা সম্ভব, কিন্তু কিভাবে?
উত্তর:
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
document.getElementById("main").appendChild(div);<body>
<div id="main"></div>
</body>var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
document.getElementById("main").appendChild(div);
OR
document.body.appendChild(div);পরিবর্তে অভিভাবক রেফারেন্স ব্যবহার করুন document.body।
আপনি এটি কীভাবে করছেন তার উপর নির্ভর করে। খাঁটি জাভাস্ক্রিপ্ট:
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);Jquery ব্যবহার করে একই কাজ করা বিব্রতকরভাবে সহজ:
$('body')
.append('my DOM manupulation skills dont seem like a big deal when using jquery')
.css('color', 'red').addClass('myclass');চিয়ার্স!
divতাই প্রশ্নের উত্তর দেয় না
অন্যান্য উত্তরগুলি এখানে কাজ করার সময়, আমি লক্ষ্য করেছি আপনি সামগ্রী সহ একটি ডিভ চেয়েছিলেন। সুতরাং অতিরিক্ত সামগ্রী সহ আমার সংস্করণটি এখানে। নীচে জেএসফিডেল লিঙ্ক।
জাভাস্ক্রিপ্ট (মন্তব্য সহ):
// Creating a div element
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
divElement.style.paddingTop = "15px";
// Adding a paragraph to it
var paragraph = document.createElement("P");
var text = document.createTextNode("Another paragraph, yay! This one will be styled different from the rest since we styled the DIV we specifically created.");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button, cause why not!
var button = document.createElement("Button");
var textForButton = document.createTextNode("Release the alert");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);এইচটিএমএল:
<body>
<h1>Title</h1>
<p>This is a paragraph. Well, kind of.</p>
</body>সিএসএস:
h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }
p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }দ্রষ্টব্য: সিএসএস লাইনগুলি রাতাল টোমালের কাছ থেকে ধার করা
জেএসফিডাল: https://jsfiddle.net/Rani_Kheir/erL7aowz/
এখানে আমি একটি সমাধানটি ব্যবহার করব:
var div = '<div id="yourId" class="yourClass" yourAttribute="yourAttributeValue">blah</div>';আপনি যদি ভেরিয়েবলের উপর ভিত্তি করে বিশিষ্টতা এবং / অথবা গুণাবলী মানগুলি চান:
var id = "hello";
var classAttr = "class";
var div = '<div id='+id+' '+classAttr+'="world" >Blah</div>';তারপরে, শরীরে সংযোজন:
document.getElementsByTagName("body").innerHTML = div;পাই হিসাবে সহজ।
[0]ব্যবহার করার সময় আমাদের নির্দিষ্ট করা দরকার getElementsByTagName()। (সম্পাদনার জন্য খুব সংক্ষিপ্ত)
আপনি এটি তৈরি করতে পারেন
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
document.getElementById("main").appendChild(board);সম্পূর্ণ চলমান স্নিপেট:
var board;
board= document.createElement("div");
board.id = "mainBoard";
board.style.cssText = "position:fixed;height:100px;width:100px;background:#ddd;"
document.getElementById("main").appendChild(board);<body>
<div id="main"></div>
</body>আইডি নাম দিয়ে ডিভ তৈরি করুন
var divCreator=function (id){
newElement=document.createElement("div");
newNode=document.body.appendChild(newElement);
newNode.setAttribute("id",id);
}বিভাগে পাঠ্য যুক্ত করুন
var textAdder = function(id, text) {
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}পরীক্ষার কোড
divCreator("div1");
textAdder("div1", "this is paragraph 1");আউটপুট
this is paragraph 1আমি আরেকটি জিনিস করতে চাই তা হল একটি অবজেক্ট তৈরি করা এবং তারপরে অবজেক্টের মধ্য দিয়ে লুপিং করা এবং স্টাইলগুলি সেট করা কারণ এটি প্রতিটি একক স্টাইলকে একের পর এক লেখার জন্য ক্লান্তিকর হতে পারে।
var bookStyles = {
color: "red",
backgroundColor: "blue",
height: "300px",
width: "200px"
};
let div = document.createElement("div");
for (let style in bookStyles) {
div.style[style] = bookStyles[style];
}
body.appendChild(div);