MCQs On Day 22: JavaScript and CSS Interactions
1. What
is the purpose of the document.getElementById() method in JavaScript?
a) To get the HTML element by its
class name
b) To get the HTML element by its ID
c) To modify the styles of an element
d) To get the text content of an element
Answer: b) To
get the HTML element by its ID
Explanation: The document.getElementById() method retrieves an HTML
element based on its unique id attribute.
2. How
can you change the background color of an element using JavaScript?
a) element.style.backgroundColor
= "red";
b) element.backgroundColor = "red";
c) document.setBackground("red");
d) changeBackgroundColor("red");
Answer: a)
element.style.backgroundColor = "red";
Explanation: You can change the background color of an element by
accessing its style property and setting the backgroundColor.
3. What
does the classList.toggle() method do in JavaScript?
a) Adds a class to an element
b) Removes a class from an element
c) Toggles the class (adds it if not present, removes it if present)
d) Changes the class of an element
Answer: c)
Toggles the class (adds it if not present, removes it if present)
Explanation: classList.toggle() is used to add or remove a class from an
element based on its current state.
4. How
can you animate an element's width using JavaScript?
a)
element.animate("width", "100px");
b) element.style.width = "100px";
c) element.animate("width 100px");
d) element.style.animation = "width 100px";
Answer: b)
element.style.width = "100px";
Explanation: JavaScript can animate the width of an element by changing
its style.width property over time.
5. Which
method is used to add an event listener to an element in JavaScript?
a) addEvent()
b) setEventListener()
c) addEventListener()
d) onEventListener()
Answer: c)
addEventListener()
Explanation: The addEventListener() method is used to attach an event
listener to an element, allowing you to execute a function when an event
occurs.
6. Which
of the following is correct for changing the text of a button using JavaScript?
a) button.innerHTML = "Click
Me";
b) button.innerText = "Click Me";
c) button.textContent = "Click Me";
d) All of the above
Answer: d) All
of the above
Explanation: All of these methods can be used to modify the text of a
button in JavaScript.
7. What
property is used to change the text color of an element using JavaScript?
a) element.color
b) element.textColor
c) element.style.color
d) element.style.fontColor
Answer: c)
element.style.color
Explanation: The color property is part of the style object in
JavaScript and is used to change the text color of an element.
8. What
does the setInterval() method do in JavaScript?
a) Sets a function to execute
only once
b) Repeatedly executes a function at a set interval
c) Executes a function after a specified delay
d) Pauses the execution of a function
Answer: b)
Repeatedly executes a function at a set interval
Explanation: setInterval() allows a function to run repeatedly at
specified time intervals, in milliseconds.
9. How do
you stop an interval set by setInterval() in JavaScript?
a) clearInterval()
b) stopInterval()
c) intervalStop()
d) clearTime()
Answer: a)
clearInterval()
Explanation: To stop an interval created by setInterval(), you use the
clearInterval() method.
10. What
method is used to hide an element in JavaScript?
a) element.hide()
b) element.style.display = "none";
c) element.style.visibility = "hidden";
d) element.style.visibility = "none";
Answer: b)
element.style.display = "none";
Explanation: You can hide an element by setting its display property to
"none" in JavaScript.
11. What
does the transition property in CSS allow you to do?
a) Add animations to an element
b) Control the duration of animations
c) Change styles gradually over time
d) Set the starting state of an animation
Answer: c)
Change styles gradually over time
Explanation: The transition property allows you to specify which
properties of an element should change gradually over a set time.
12. How
can you apply a CSS class to an element using JavaScript?
a) element.className =
"newClass";
b) element.addClass("newClass");
c) element.class = "newClass";
d) element.style.class = "newClass";
Answer: a)
element.className = "newClass";
Explanation: You can change the class of an element by modifying its
className property in JavaScript.
13. What
event is triggered when a user clicks a button in HTML?
a) click
b) onClick
c) mousedown
d) mouseup
Answer: a)
click
Explanation: The click event is triggered when a user clicks an element,
such as a button.
14. Which
CSS property is used to create a hover effect in JavaScript?
a) :hover
b) hover:
c) element.hover
d) onhover
Answer: a)
:hover
Explanation: The :hover pseudo-class in CSS is used to define a style
for an element when the user hovers over it.
15. Which
JavaScript method is used to add a new class to an element?
a) element.addClass()
b) element.classList.add()
c) element.className.add()
d) element.addClassName()
Answer: b)
element.classList.add()
Explanation: The classList.add() method is used to add one or more
classes to an element.
16. What
does the element.style.visibility property do in JavaScript?
a) Makes the element fully
visible
b) Hides the element completely
c) Hides the element but keeps it in the layout flow
d) Changes the element's visibility when hovered over
Answer: c)
Hides the element but keeps it in the layout flow
Explanation: The visibility property makes an element invisible, but it
still occupies space on the page.
17. Which
of the following is the correct way to add a CSS style to an element in
JavaScript?
a)
element.style("background-color", "blue");
b) element.setStyle("background-color", "blue");
c) element.style.backgroundColor = "blue";
d) element.addStyle("background-color: blue");
Answer: c)
element.style.backgroundColor = "blue";
Explanation: In JavaScript, you can change an element's style by
modifying the style property, like backgroundColor.
18. How
do you change the font size of an element using JavaScript?
a) element.fontSize =
"20px";
b) element.style.fontSize = "20px";
c) element.font.size = "20px";
d) element.changeFontSize("20px");
Answer: b)
element.style.fontSize = "20px";
Explanation: The font size can be changed by accessing the
style.fontSize property.
19. How
can you make an element appear after it has been hidden in JavaScript?
a) element.style.visibility =
"visible";
b) element.style.display = "block";
c) element.style.display = "inline";
d) All of the above
Answer: d) All
of the above
Explanation: You can make an element visible using either visibility,
display, or other properties depending on the behavior you desire.
20. How
do you stop a CSS animation using JavaScript?
a) element.style.animation =
"none";
b) element.style.animationStop = true;
c) element.stopAnimation();
d) element.animationStop();
Answer: a)
element.style.animation = "none";
Explanation: The animation can be stopped by setting the animation
property to "none" in JavaScript.
This is just a subset of 20
questions. If you'd like more, please let me know, and I can provide additional
questions.
4o mini
You said:
more 40
ChatGPT
said:
ChatGPT
Here are 40 more
multiple-choice questions (MCQs) based on JavaScript and CSS
Interactions, along with explanations for each question:
21. How
can you modify the CSS font-size of an element using JavaScript?
a) element.fontSize =
"20px";
b) element.style.fontSize = "20px";
c) element.setFontSize("20px");
d) element.changeFont("20px");
Answer: b)
element.style.fontSize = "20px";
Explanation: You can change the font-size using the style.fontSize
property in JavaScript.
22. Which
of the following can be used to add multiple classes to an element in
JavaScript?
a)
element.classList.add("class1", "class2");
b) element.classList.addClass("class1, class2");
c) element.addClass("class1, class2");
d) element.addMultipleClasses("class1", "class2");
Answer: a)
element.classList.add("class1", "class2");
Explanation: classList.add() can accept multiple class names and add
them to the element.
23. Which
property is used to change the width of an element with JavaScript?
a) element.style.width
b) element.setWidth()
c) element.width
d) element.setStyle("width")
Answer: a)
element.style.width
Explanation: The width property can be modified using
element.style.width in JavaScript.
24. How
can you animate an element’s opacity using JavaScript?
a) element.style.opacity =
"0.5";
b) element.animate("opacity", 0.5);
c) element.style.visibility = "visible";
d) element.opacity = "0.5";
Answer: a)
element.style.opacity = "0.5";
Explanation: You can change the opacity of an element by setting element.style.opacity.
25. Which
of the following is correct for setting an element's background color to blue
using JavaScript?
a) element.style.background =
"blue";
b) element.style.backgroundColor = "blue";
c) element.setBackground("blue");
d) Both a) and b)
Answer: d) Both
a) and b)
Explanation: Both background and backgroundColor can be used to set the
background color in JavaScript.
26. How
can you dynamically add an inline style to an element using JavaScript?
a) element.addStyle("color:
red");
b) element.setStyle("color: red");
c) element.style.color = "red";
d) element.setColor("red");
Answer: c)
element.style.color = "red";
Explanation: To dynamically add an inline style, you use the style
property of an element.
27. Which
CSS property is used for setting the visibility of an element?
a) visibility
b) opacity
c) display
d) hidden
Answer: a)
visibility
Explanation: The visibility property in CSS controls whether an element
is visible or hidden without affecting the layout.
28. Which
of the following is used to create a CSS transition effect in JavaScript?
a) element.style.transition =
"all 0.5s ease";
b) element.transition("all", 0.5);
c) element.addTransition("all 0.5s ease");
d) element.animate("all", "0.5s");
Answer: a)
element.style.transition = "all 0.5s ease";
Explanation: The transition property allows you to specify the duration
and effect of changes in CSS properties.
29. What
method allows you to add an event listener for when an element is clicked?
a) element.addClickListener()
b) element.onClick()
c) element.addEventListener('click', function)
d) element.clickEvent()
Answer: c)
element.addEventListener('click', function)
Explanation: The addEventListener() method is used to attach event listeners
to elements for specific events like click.
30. Which
method is used to remove a class from an element in JavaScript?
a) element.removeClass()
b) element.classList.remove()
c) element.removeClassName()
d) element.classList.delete()
Answer: b)
element.classList.remove()
Explanation: classList.remove() is used to remove one or more classes
from an element.
31. How
can you remove an inline style for an element using JavaScript?
a) element.style.remove()
b) element.removeStyle()
c) element.style = ""
d) element.style.clear()
Answer: c)
element.style = ""
Explanation: To remove an inline style, you can set the style property
to an empty string.
32. What
method is used to change the value of a form element (such as a text input)?
a) element.value = "new
value";
b) element.setValue("new value");
c) element.inputValue = "new value";
d) element.textContent = "new value";
Answer: a)
element.value = "new value";
Explanation: The value of form elements like input can be modified using
the value property.
33. What
does the display: block property do in CSS?
a) Hides an element
b) Makes an element inline
c) Makes the element a block-level element
d) Aligns an element to the center
Answer: c)
Makes the element a block-level element
Explanation: The display: block property forces an element to behave
like a block-level element, occupying the full width of its container.
34. How
do you add a hover effect to an element using JavaScript?
a) element.onHover()
b) element.style.hover = "color: red";
c) element.classList.add("hover-class");
d) element.addEventListener('hover', function)
Answer: c)
element.classList.add("hover-class");
Explanation: You can dynamically add a class that defines a hover effect
using classList.add() in JavaScript.
35. Which
JavaScript function is used to change the font size of an element?
a)
element.setFontSize("20px");
b) element.changeFontSize("20px");
c) element.style.fontSize = "20px";
d) element.setStyle("font-size: 20px");
Answer: c)
element.style.fontSize = "20px";
Explanation: You modify the font size by setting the style.fontSize
property.
36. Which
event occurs when the mouse is moved over an element?
a) mouseover
b) hover
c) click
d) focus
Answer: a)
mouseover
Explanation: The mouseover event occurs when the mouse pointer enters an
element.
37. Which
JavaScript property is used to toggle the visibility of an element?
a) element.style.visibility =
"hidden";
b) element.style.display = "none";
c) element.style.visibility = "visible";
d) element.style.display = "block";
Answer: b)
element.style.display = "none";
Explanation: To hide an element dynamically, you can set the display
property to "none". To make it visible, set display back to
"block" or another appropriate value.
38. How
can you add a CSS rule for an element in JavaScript?
a)
element.style.addRule("color", "blue");
b) element.style["color"] = "blue";
c) element.addRule("color: blue");
d) element.style.add("color: blue");
Answer: b)
element.style["color"] = "blue";
Explanation: You can add or modify inline styles by using the style
property and referring to the CSS property you want to change.
39. How
do you animate an element's position using CSS?
a) element.style.animation =
"move 2s ease";
b) element.animatePosition("move 2s ease");
c) element.style.transition = "position 2s ease";
d) element.style.position = "absolute";
Answer: a)
element.style.animation = "move 2s ease";
Explanation: To animate an element's position, you can use the animation
property in CSS and define keyframes for the movement.
40. Which
CSS property is used to control the speed of an animation?
a) animation-duration
b) animation-speed
c) animation-timing
d) transition-speed
Answer: a)
animation-duration
Explanation: The animation-duration property controls the duration of
the animation cycle.
This concludes the additional 40
MCQs on JavaScript and CSS Interactions. You now have a total of 60
MCQs!
2/2
4o mini
You said:
more 40
ChatGPT
said:
ChatGPT
Here are 40 more
multiple-choice questions (MCQs) based on JavaScript and CSS
Interactions, along with explanations:
41. Which
JavaScript method is used to toggle a class on an element?
a)
element.toggleClass("class-name");
b) element.classList.toggle("class-name");
c) element.classList.add("class-name");
d) element.toggle("class-name");
Answer: b)
element.classList.toggle("class-name");
Explanation: The classList.toggle() method is used to toggle a class on
an element.
42. How
can you modify the background color of an element using JavaScript?
a) element.backgroundColor =
"blue";
b) element.style.backgroundColor = "blue";
c) element.setBackground("blue");
d) element.changeBackground("blue");
Answer: b)
element.style.backgroundColor = "blue";
Explanation: To modify the background color of an element, use the
style.backgroundColor property.
43. Which
CSS property is used to set the speed of a transition?
a) transition-speed
b) transition-timing
c) transition-duration
d) transition-delay
Answer: c)
transition-duration
Explanation: The transition-duration property is used to specify how
long the transition effect should take.
44. What
is the default value of the display property for div elements in CSS?
a) none
b) inline
c) block
d) flex
Answer: c)
block
Explanation: By default, the display property for div elements is set to
block, meaning it takes up the full width of its container.
45. What
method is used to add an event listener for when the mouse pointer enters an
element?
a)
element.addEventListener("mouseover", function);
b) element.addEventListener("mouseenter", function);
c) element.onEnter();
d) element.addEventListener("hover", function);
Answer: a)
element.addEventListener("mouseover", function);
Explanation: The mouseover event listener is triggered when the mouse
pointer enters an element.
46. Which
CSS property allows you to control the timing of a CSS transition?
a) transition-speed
b) transition-timing-function
c) transition-delay
d) transition-duration
Answer: b)
transition-timing-function
Explanation: The transition-timing-function property controls how the
intermediate property values of a transition are calculated (e.g., ease,
linear, etc.).
47. What
property should be used in CSS to make text bold?
a) font-weight
b) font-style
c) font-family
d) text-weight
Answer: a)
font-weight
Explanation: The font-weight property in CSS is used to set the
thickness of the text, where bold can be specified.
48. How
can you stop an animation in JavaScript?
a) element.stopAnimation();
b) element.animation = "none";
c) element.style.animation = "none";
d) element.style.stopAnimation();
Answer: c)
element.style.animation = "none";
Explanation: To stop an animation in JavaScript, you can set the
style.animation property to "none".
49. Which
JavaScript method is used to remove a class from an element?
a)
element.removeClass("class-name");
b) element.classList.remove("class-name");
c) element.removeClassName("class-name");
d) element.remove("class-name");
Answer: b)
element.classList.remove("class-name");
Explanation: The classList.remove() method is used to remove one or more
classes from an element.
50. How
can you hide an element using JavaScript?
a) element.style.visibility =
"hidden";
b) element.style.display = "none";
c) element.hidden = true;
d) All of the above
Answer: d) All
of the above
Explanation: You can hide an element in multiple ways, such as setting
style.visibility = "hidden", style.display = "none", or
using the hidden attribute.
51. What
is the correct syntax to toggle between adding and removing a class from an
element in JavaScript?
a)
element.toggleClass("class-name");
b) element.classList.toggle("class-name");
c) element.addClass("class-name");
element.removeClass("class-name");
d) element.addEventListener("toggle", function);
Answer: b)
element.classList.toggle("class-name");
Explanation: The classList.toggle() method can be used to add a class if
it is not present and remove it if it is.
52. Which
CSS property is used to specify the time a transition effect will take to
complete?
a) transition-time
b) transition-duration
c) transition-delay
d) transition-speed
Answer: b)
transition-duration
Explanation: The transition-duration property specifies how long the
transition effect should take to complete.
53. How
can you animate an element's background color using JavaScript?
a) element.style.animation =
"backgroundColor 2s";
b) element.style.transition = "backgroundColor 2s";
c) element.style.backgroundColor = "blue";
d) element.animate({backgroundColor: "blue"}, 2);
Answer: b)
element.style.transition = "backgroundColor 2s";
Explanation: You can animate an element's background color by using the
transition property in CSS or JavaScript.
54. Which
of the following is used to add CSS animation to an element in JavaScript?
a) element.style.animation =
"move 2s";
b) element.style.addAnimation("move 2s");
c) element.addEventListener("animation", "move 2s");
d) element.addStyle("animation: move 2s");
Answer: a)
element.style.animation = "move 2s";
Explanation: You can add CSS animation to an element by setting the
style.animation property.
55. Which
CSS property controls the color of the text?
a) font-color
b) text-color
c) color
d) font-style
Answer: c)
color
Explanation: The color property in CSS is used to change the text color.
56. What
is the effect of using element.style.display = "none";?
a) Hides the element but keeps it
in the document layout
b) Hides the element and removes it from the layout
c) Makes the element transparent
d) Makes the element visible
Answer: b)
Hides the element and removes it from the layout
Explanation: Setting display to "none" hides the element and
removes it from the layout, causing other elements to adjust accordingly.
57. How
can you animate the width of an element using JavaScript?
a) element.style.width =
"100px";
b) element.animate({width: "100px"}, 2);
c) element.style.animation = "width 2s";
d) element.style.transition = "width 2s";
Answer: d)
element.style.transition = "width 2s";
Explanation: You can animate the width of an element by setting the
transition property in JavaScript or CSS.
58. Which
event occurs when an element gains focus?
a) onfocus
b) onhover
c) onenter
d) onmouseover
Answer: a)
onfocus
Explanation: The onfocus event occurs when an element gains focus, such
as when a user clicks on an input field.
59. Which
CSS property is used to set the transparency of an element?
a) opacity
b) visibility
c) transparency
d) background-opacity
Answer: a)
opacity
Explanation: The opacity property in CSS controls the transparency of an
element, with values ranging from 0 (fully transparent) to 1 (fully opaque).
60. How
can you apply a CSS class to an element with JavaScript?
a)
element.applyClass("class-name");
b) element.addClass("class-name");
c) element.classList.add("class-name");
d) element.addClassName("class-name");
Answer: c)
element.classList.add("class-name");
Explanation: You can add a class to an element by using the
classList.add() method in JavaScript.
61. How
do you pause a CSS animation with JavaScript?
a) element.animationState =
"paused";
b) element.style.animationPlayState = "paused";
c) element.style.animation = "paused";
d) element.style.animationPause = "true";
Answer: b)
element.style.animationPlayState = "paused";
Explanation: The animationPlayState property can be set to
"paused" to stop a CSS animation from running.
62. Which
property is used in CSS to make text bold?
a) font-style
b) font-weight
c) text-style
d) text-weight
Answer: b)
font-weight
Explanation: The font-weight property is used to make text bold in CSS.
63. What
is the correct syntax to set the font size using JavaScript?
a) element.fontSize =
"20px";
b) element.style.fontSize = "20px";
c) element.style.setFont("20px");
d) element.setFontSize("20px");
Answer: b)
element.style.fontSize = "20px";
Explanation: The correct way to change the font size is to use the
style.fontSize property in JavaScript.
64. Which
CSS property is used to set the font style of an element?
a) font-style
b) font-weight
c) text-style
d) font-variant
Answer: a)
font-style
Explanation: The font-style property is used to specify the style of the
font, such as normal, italic, or oblique.
65. Which
JavaScript function is used to remove an event listener?
a) removeEventListener()
b) event.remove()
c) deleteEventListener()
d) removeEvent()
Answer: a)
removeEventListener()
Explanation: The removeEventListener() method is used to remove an event
listener that was previously added to an element.
66. What
is the default value for the animation-iteration-count property in CSS?
a) 1
b) infinite
c) auto
d) normal
Answer: a) 1
Explanation: The default value for the animation-iteration-count
property is 1, meaning the animation runs once by default.
67. How
can you make a CSS animation run infinitely?
a) animation-iteration-count:
infinite;
b) animation-duration: infinite;
c) animation-repeat: true;
d) animation-infinite: true;
Answer: a)
animation-iteration-count: infinite;
Explanation: To make an animation run infinitely, the
animation-iteration-count property is set to infinite.
68. How
do you make an element visible again after using display: none;?
a) element.style.display =
"block";
b) element.style.visibility = "visible";
c) element.style.display = "inline";
d) element.style.removeDisplay();
Answer: a)
element.style.display = "block";
Explanation: After setting an element's display to none, it can be made
visible again by setting it to a valid display value like "block" or
"inline".
69. Which
property is used to change the visibility of an element in CSS?
a) display
b) visibility
c) opacity
d) visibility-style
Answer: b)
visibility
Explanation: The visibility property in CSS is used to control the
visibility of an element, where "hidden" will hide the element
without removing it from the document flow.
70. How
can you stop an animation after 5 seconds in JavaScript?
a) setTimeout(stopAnimation,
5000);
b) element.stopAnimation(5000);
c) setInterval(stopAnimation, 5000);
d) element.style.animation = "none";
Answer: a)
setTimeout(stopAnimation, 5000);
Explanation: You can use setTimeout() to stop an animation after a
certain amount of time by calling a function that modifies the animation
properties.
This concludes the additional 40
MCQs on JavaScript and CSS Interactions. You now have a total of 100
MCQs!
4o mini
You said:
more
ChatGPT
said:
ChatGPT
Here are 40 more MCQs on JavaScript
and CSS Interactions:
71. Which
CSS property is used to create space between elements?
a) padding
b) margin
c) gap
d) spacing
Answer: b)
margin
Explanation: The margin property is used to create space outside the
border of an element, between it and its neighbors.
72. How
do you change the background color of an element using JavaScript?
a) element.backgroundColor =
"red";
b) element.style.backgroundColor = "red";
c) element.style.background = "red";
d) element.bgColor = "red";
Answer: b)
element.style.backgroundColor = "red";
Explanation: To change the background color of an element in JavaScript,
you use the style.backgroundColor property.
73. Which
JavaScript method is used to change the content of an HTML element?
a) innerHTML
b) textContent
c) contentText
d) setContent()
Answer: a)
innerHTML
Explanation: The innerHTML property is used to change or retrieve the
content of an HTML element, including HTML tags.
74. How
do you create a CSS animation delay?
a) animation-timeout
b) animation-delay
c) delay
d) animation-wait
Answer: b)
animation-delay
Explanation: The animation-delay property specifies when an animation
will start after a delay.
75. How
can you apply a CSS class to an element using JavaScript?
a) element.className =
"className";
b) element.setClass("className");
c) element.addClass("className");
d) element.style.class = "className";
Answer: a)
element.className = "className";
Explanation: To add a class to an element, you can use the className
property and assign a class name.
76. What
does the :hover pseudo-class do in CSS?
a) Changes the appearance when an
element is clicked
b) Changes the appearance when an element is focused
c) Changes the appearance when an element is hovered over
d) Changes the appearance when an element is active
Answer: c)
Changes the appearance when an element is hovered over
Explanation: The :hover pseudo-class applies styles when the user hovers
over an element.
77. Which
CSS property is used to control the transparency of an element?
a) opacity
b) visibility
c) background-color
d) transparent
Answer: a)
opacity
Explanation: The opacity property controls the transparency of an
element, where 0 is completely transparent and 1 is fully opaque.
78. Which
JavaScript method is used to find the index of an item in an array?
a) findIndex()
b) indexOf()
c) getIndex()
d) searchIndex()
Answer: b)
indexOf()
Explanation: The indexOf() method returns the index of the first
occurrence of a specified element in an array.
79. What
is the default value for the position property in CSS?
a) absolute
b) relative
c) fixed
d) static
Answer: d)
static
Explanation: The default value of the position property is static,
meaning the element is positioned according to the normal document flow.
80. Which
CSS property controls the layout of the grid container?
a) grid-layout
b) grid-template-columns
c) grid-area
d) display
Answer: d)
display
Explanation: The display property is used to define a grid container by
setting it to grid.
81. What
does the float property do in CSS?
a) Positions an element at the
center
b) Positions an element to the left or right of its container
c) Changes the alignment of text
d) Changes the background of an element
Answer: b)
Positions an element to the left or right of its container
Explanation: The float property is used to position elements to the left
or right, allowing other content to wrap around it.
82. Which
CSS property is used to add space inside an element's border?
a) border-spacing
b) padding
c) margin
d) gap
Answer: b)
padding
Explanation: The padding property adds space inside the element, between
the content and the border.
83. How
do you make an element fixed on the page using CSS?
a) position: relative;
b) position: absolute;
c) position: static;
d) position: fixed;
Answer: d)
position: fixed;
Explanation: The position: fixed; property positions an element relative
to the viewport, so it remains fixed when the page is scrolled.
84. Which
method in JavaScript is used to add an element to the end of an array?
a) append()
b) push()
c) add()
d) insert()
Answer: b)
push()
Explanation: The push() method adds one or more elements to the end of
an array.
85. How
can you select an element with a specific class in JavaScript?
a) getElementByClass()
b) getElementsByClassName()
c) getElementById()
d) querySelectorAll()
Answer: b)
getElementsByClassName()
Explanation: The getElementsByClassName() method returns a collection of
all elements with the specified class name.
86. How
do you change the content of an HTML element to uppercase using JavaScript?
a) element.style.textTransform =
"uppercase";
b) element.textContent.toUpperCase();
c) element.style.textContent = "uppercase";
d) element.style.textTransform = "UPPERCASE";
Answer: a)
element.style.textTransform = "uppercase";
Explanation: The textTransform property can be used to set the text to
uppercase, lowercase, or capitalize.
87. How
do you stop a CSS animation using JavaScript?
a) element.animation =
"none";
b) element.style.animationPlayState = "paused";
c) element.style.animation = "stop";
d) element.style.animation = "inactive";
Answer: a)
element.animation = "none";
Explanation: To stop a CSS animation, you can set the animation property
to "none".
88. Which
CSS property is used to control the size of the content box?
a) width
b) height
c) box-sizing
d) content-size
Answer: c)
box-sizing
Explanation: The box-sizing property defines how the total width and
height of an element are calculated, including padding and borders.
89. How
can you create a new element in JavaScript?
a) document.createElement();
b) document.newElement();
c) document.create();
d) create();
Answer: a)
document.createElement();
Explanation: The document.createElement() method is used to create a new
HTML element.
90. How
do you create a CSS grid with three columns?
a) grid-template-columns:
repeat(3, 1fr);
b) grid-columns: 3;
c) grid-template-columns: 1fr 1fr 1fr;
d) grid: 3;
Answer: a)
grid-template-columns: repeat(3, 1fr);
Explanation: The grid-template-columns property defines the number of
columns in a CSS grid.
91. How
do you make text italic using JavaScript?
a) element.style.fontStyle =
"italic";
b) element.style.fontWeight = "italic";
c) element.style.textStyle = "italic";
d) element.style.fontType = "italic";
Answer: a)
element.style.fontStyle = "italic";
Explanation: The fontStyle property in JavaScript can be used to set the
text to italic.
92. What
is the purpose of the z-index property in CSS?
a) Specifies the stack order of
elements
b) Specifies the font size
c) Specifies the text color
d) Specifies the padding of an element
Answer: a)
Specifies the stack order of elements
Explanation: The z-index property is used to control the stacking order
of elements that overlap.
93. Which
method is used to remove an element from an array in JavaScript?
a) pop()
b) remove()
c) delete()
d) shift()
Answer: a)
pop()
Explanation: The pop() method removes the last element from an array.
94. What
does flex-wrap: wrap; do in a flexbox container?
a) Wraps the content within the
container
b) Disables wrapping of the content
c) Aligns content in rows
d) Wraps text content inside elements
Answer: a)
Wraps the content within the container
Explanation: The flex-wrap: wrap; property allows items within a flex
container to wrap onto the next line if necessary.
95. How
do you access an element's ID in JavaScript?
a) document.getElementById()
b) document.getElementByClassName()
c) document.getId()
d) document.querySelector()
Answer: a)
document.getElementById()
Explanation: The getElementById() method is used to select an element by
its ID in JavaScript.
96. Which
CSS property defines the space between grid items?
a) gap
b) space
c) margin
d) grid-spacing
Answer: a) gap
Explanation: The gap property is used in CSS grids and flexbox to define
the space between items.
97. Which
CSS property is used to change the font of an element?
a) font-size
b) font-style
c) font-family
d) text-font
Answer: c)
font-family
Explanation: The font-family property defines the font of an element in
CSS.
98. Which
JavaScript method is used to parse a string into a number?
a) parseFloat()
b) parseInt()
c) toFixed()
d) Number()
Answer: b)
parseInt()
Explanation: The parseInt() method parses a string and returns an
integer.
99. How
do you hide an element using CSS?
a) display: none;
b) visibility: hidden;
c) opacity: 0;
d) All of the above
Answer: d) All
of the above
Explanation: You can hide an element in CSS using any of these methods.
display: none; removes the element from the layout, visibility: hidden; keeps
the element in the layout but makes it invisible, and opacity: 0; makes the
element fully transparent.
100. What
does the overflow property do in CSS?
a) Defines what happens if
content overflows the element's box
b) Defines the content inside an element
c) Hides content outside the element
d) Makes content visible outside the element
Explanation: The overflow property controls what happens if content overflows an element's box. Common values are auto, scroll, and hidden.
